jQuery UI Sortable - ConnectToSort 문제

Question

아이콘 용 드롭 인터페이스 &을 만들려고합니다. 기본적으로, 나는 3 개의 div 컨테이너를 가지고 있으며, 각 컨테이너는 내부에 정렬 된 목록이 있습니다. 첫 번째 목록에는 아이콘 (<li><img /></li>)이 들어 있으며 두 개의 나머지 아이콘은 비어 있으며 아이콘을 드래그, 놓기 및 정렬 된 형태로 받아야합니다. 각 빈 목록은 아이콘이 프런트 엔드에 표시 될 행에 연결됩니다.

또한 Ctrl/Cmd + 마우스 클릭으로 항목을 선택할 수있는 기능을 만들었으므로 한 번에 여러 아이콘을 드롭 할 수 있습니다.

한 가지 단점을 제외하고 모두 예상대로 작동합니다. 사용자 지정 Ctrl/Cmd + Click 옵션은 이미 삭제 된 드래그 가능한 요소에서 작동하지 않습니다.

실현 후에는 가능한 한 많은 테스트를 수행하고 범위를 좁혔습니다. 그 원인은 'Draggable'함수의 ConnectToSortable 매개 변수 인 것 같습니다. 매개 변수가 주석 처리 된 경우 Ctrl + 클릭 기능이 예상대로 작동합니다. 문제는 각 빈 목록 (행)에 연결된 모든 아이콘을 저장하기 위해이 매개 변수를 사용해야하므로 나중에 검색 할 수 있다는 것입니다. 여기

내 HTML 코드입니다 :

<div id="container"> 
<div id="row1" class="row"> 
    <ol class="drop-container"> 
     <li class='draggable'><span class="squares blue-squares">&nbsp;</span></li> 
     <li class='draggable'><span class="squares blue-squares">&nbsp;</span></li> 
     <li class='draggable'><span class="squares blue-squares">&nbsp;</span></li> 
    </ol> 
</div> 
<div id="row2" class="row"> 
    <ol class="drop-container"> 
     <li class='draggable'><span class="squares red-squares">&nbsp;</span></li> 
     <li class='draggable'><span class="squares red-squares">&nbsp;</span></li> 
     <li class='draggable'><span class="squares red-squares">&nbsp;</span></li> 
    </ol> 
</div> 
<div id="row3" class="row"> 
    <ol class="drop-container"> 
     <li class='draggable'><span class="squares green-squares">&nbsp;</span></li> 
     <li class='draggable'><span class="squares green-squares">&nbsp;</span></li> 
     <li class='draggable'><span class="squares green-squares">&nbsp;</span></li> 
    </ol> 
</div> 

그리고 여기 내 JS 코드 :

$(function() { 
// Custom function for Ctrl-Cmd Left Mouse Click 
$(".draggable, .ui-draggable").click(function(e) { 
    if (e.ctrlKey || e.metaKey === true) { 
     if (!$(this).hasClass("selected")) { 
      $(this).addClass("selected"); 
     } else { 
      $(this).removeClass("selected"); 
     } 
    } 
}); 
// Draggable 
$('.draggable').draggable({ 
    connectToSortable: ".drop-container", 
    delay: 200, 
    drag: function(event, ui) { 
     $(".selected").removeClass("selected"); 
    }, 
    helper: "original", 
    revert: "invalid", 
    revertDuration: 300 
}); 
// Droppable 
$('.drop-container').droppable({ 
    tolerance: "touch" 
}); 
// Sortable 
$('.drop-container').sortable({ 
    appendTo: ".drop-container", 
    connectWith: ".drop-container", 
    items: ".draggable", 
    revert: true 
}); 
// Disable selection of items 
$("div, ol, ul, li, span").disableSelection(); 
});​ 

내가이 테스트를 위해 JSfiddle을했고, 나는 재현 할 수 있었다 오류. 이 테스트의 목적을 위해 실제 이미지 대신 스팬을 사용하고 있습니다.

내가 잘못했거나 jQuery UI 버그입니까? 어떤 아이디어 나 해결 방법이든 환영하고 감사합니다! 항목이에서 삭제됩니다 일단

Answer 1

당신은

$('.drop-container').sortable("refresh"); 

을해야 참조하십시오. 답장을 http://jqueryui.com/demos/sortable/#method-refresh