커서 위치에 요소 놓기

Question

드랍 할 수있는 요소에 요소를 놓으라는 점에서 끌어서 놓기 이벤트를 수행하고 있습니다.

<div class="draggable ui-draggable" id="800068"> 
    <h5>test 2.mp4</h5> 
</div> 

내가 드러그로 ::

<div class="drop" data-bind:"foreach:items"> 
    <div class="slot"> 
     <p data-bind="text"></p> 
    </div> 
</div> 

& 내 jQuery 코드를 삭제하고 & 드롭은있는 그대로 ::

$('.draggable').draggable(); 
$('.drop').droppable(); 

그러나 손실 된 요소는 하단에 추가됩니다 & 그 방울에 떨어 뜨린 요소를 덧붙이고 싶습니다. so that I can be over Slot as well as over <p>

Answer 1

$(".slot").droppable({ 
     accept: ".draggable", 
     tolerance:"pointer", 
     drop: function (event, ui) { 
      var dropped = ui.draggable; 
      var droppedOn = this; 
      $(dropped).detach().css({ top: 0, left: 0 }); 
      $(droppedOn).before($(dropped)); 
      $(dropped).append("<h5></h5>"); 
      $(dropped).find('h5').text("hello test"); 
     } 
    }); 

이렇게하면 원하는 항목이 삭제 된 div 아래에 표시됩니다.