jquery - JQueryを使用して要素を正確な位置にドロップする

Question

複数の div またはスロット (たとえば) を内部に作成した div を作成した UI を作成しました。これらのスロットは Knockout.js を使用して生成されます。つまり、これらのスロットはスライダーの値にバインドされています。私の懸念は、これらの div に他の外側の要素をドロップしたいということですが、これを行っているときに最後の div にドロップされ、再度ドロップすると、Slot.bt の上部 div に追加されます。私がドロップしている場所、つまり同じ位置にドロップする必要があることを望みます.2つのdivの途中でもかまいません.私に提案してください.私のコードは次のとおりです:

<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');


            }
        });