Dropping element at exact position using JQuery -

i have made ui have created div inside multiple divs or slots(say).these slots generated using knockout.js,i mean these slot binded on slider value.depending on value of slider generate slots dynamically.my concern want drop other outside element on these divs when doing getting droped on last div , again if drop again added upper div of slot.bt want must dropped dropping i.e on same position.it can @ midway of 2 div well.please suggest me.my code follows:

<div class="slotsystem">                         <div class="slotmachine" data-bind="foreach:slots,style:{height:height()+'px'}">                             <div class="slot">                                 <div class="slot-info drop" data-bind="text:formatedtime,style:{height:height()+'px'}"></div>                             </div>                         </div>                     </div> $(".drop").droppable({             accept: ".draggable",             tolerance:"pointer",             drop: function (event, ui) {                 console.log("drop");                 var dropped = ui.draggable;                 var droppedon = $(this);                 $(dropped).detach().css({ top: 0, left: 0 }).appendto(droppedon);                  $('#clear-organizer').show();                 $('#saveplaylist').show();                 $(dropped).height(10);                  var closebtn = ui.draggable.find(' .close');                 $(closebtn).addclass('close-organizer');               }         }); 

it told in code. make write in question, want make .slotmachine div droppable one, not .slot-info (or .slot matter).

edit: if want find out on div dropped on , place dragged div next it, leave .slots droppable , in drop handler use .insertafter() or .insertbefore() (which inserts element outside of droppedon target) instead of .appendto() using (which insert element inside droppedon target).