jquery multiple draggable and sortable

Question

jquery로 드래그 가능하고 정렬 가능 학생들이 여러 개의 답 (빨간색 상자)을 사용하여 질문 (파란색 상자)에 답하고 답변을 정렬 할 수있는 시스템을 만들고 싶습니다. 파란 상자의 수는 알려지지 않았기 때문에 '컨테이너'라는 클래스를 만들었습니다.

나는 그것을 설정하고 jsfiddle에 배치했습니다 http://jsfiddle.net/smethorst/h3ZNd/2/

HTML

<ul id="answers"> 
    <li>Item 1 (+)</li> 
    <li>Item 2 (+)</li> 
    <li>Item 3 (+)</li> 
    <li>Item 4 (+)</li> 
</ul> 

<ul class="container"> 
</ul> 
<ul class="container"> 
</ul> 

JQuery와 $ (함수() {나는 장소 솔루션에서이

$("#answers li").draggable({ 
     connectToSortable: '.container', 
     helper: 'clone', 
     revertDuration: 0 
    }); 

    $(".container").sortable({ 
     revert: true 
    }); 

    $(".container li").draggable({ 
     connectToSortable: '.container', 
     revert: "invalid", 
    }); 
}); 

jsfiddle : http://jsfiddle.net/smethorst/h3ZNd/2/

그래서 문제는 다른 질문 상자에 응답을 끌어다 놓을 수 없다는 것입니다. 따라서 빨간색 상자에서 파란색 상자로 항목을 드래그 한 후에 다른 파란색 상자 (복제본 없음)로 드래그 할 수 있어야합니다.

나는이 일처럼 드롭 후 다른 일을 시도했지만, 그것은 작동하지 않았다

$(this).append($(ui.draggable)); 
$(".container").sortable('refresh'); 

그것에 대한 해결책이 있습니까? 미리 감사드립니다.

Answer 1

쉽게 구분할 수있는 옵션이 있습니다 (connectWith). 그것은 다른 sortables을 연결하는 선택을 허용합니다

$(".container").sortable({ 
    connectWith: '.container', 
    revert: true 
}); 

JSFiddle

당신의 다음 문제는 아마 모든 상자가 하나 개의 요소를 수용해야 할 것이다. 따라서 요소의 동적 정렬에있는 정렬 가능한 다른 요소를 삭제해야합니다. 이는 생각보다 까다 롭습니다.