드래그 가능 및 삭제 가능으로 Sortable이 제대로 작동하지 않습니다.

Question

데모 http://jsfiddle.net/nivea75ml/5NhFA/1/을 참조하십시오.

여기에서 어두운 녹색 영역은 어두운 게리 영역으로 끌어서 놓을 수 있습니다. 또한 예를 들어, Block2가 어두운 회색 영역으로 먼저 드래그되고 Block3이 Block2의 위치로 이동해야하는 경우 3 개의 블록을 정렬 할 수 있기를 원합니다.

현재 정렬 가능한 기능은 Draggable & Droppable없이 작동합니다. http://jsfiddle.net/nivea75ml/sNnAe/에서 확인하십시오. 그러나 Draggable & Droppable에서는 작동하지 않습니다 (http://jsfiddle.net/nivea75ml/5NhFA/1/ 참조).

아무도 도와 줄 수 있습니까? 미리 감사드립니다!

HTML :

<div class="demo"> 

    <div id="droppable" class="drp"> 

    </div> 
    <div id="draggableElements" class="drp"> 
     <div class="draggable"> 
      <p>Sen1</p> 
     </div> 
     <div class="draggable"> 
      <p>Sen2</p> 
     </div> 
     <div class="draggable"> 
      <p>Sen3</p> 
     </div> 

    </div> 
</div> 

자바 스크립트 :

$(function() { 

      $("#draggableElements, #droppable").sortable({ 
        connectWith: ".drp", 
        placeholder: "ui-draggable" 
       }); 

    }); 

내가 첫 번째 jsfiddle을 수정 http://jqueryui.com/demos/sortable/#connect-lists

:

Answer 1

방금 ​​연결된 목록 정렬 가능한 사용하려는 것 같은데 이렇게하면 위의 회색 영역을 정렬 할 수 있습니다. 귀하의 필요 사항을 완전히 충족시킬 수도 있고 그렇지 않을 수도 있습니다. 정렬 가능한 항목을 드롭 할 수있는 항목에 넣고 정렬 가능한 항목으로 다시 가져올 수있게하려면 jQuery Sortable and Droppable을 살펴보십시오.