2010-06-11 5 views
0

jquery-ui를 사용하려고합니다.jquery-ui 끌어서 놓기 - 항목을 떨어 뜨리는 방법?

http://jqueryui.com/demos/sortable/#connect-lists

$(function() { 
    $("#sortable1, #sortable2").sortable({ 
     connectWith: '.connectedSortable' 
    }).disableSelection(); 
}); 

<ul id="sortable1" class="connectedSortable"> 
    <li class="ui-state-default">Item 1</li> 
    <li class="ui-state-default">Item 2</li> 
    <li class="ui-state-default">Item 3</li> 
</ul> 

<ul id="sortable2" class="connectedSortable"> 
    <li class="ui-state-default">Item 1</li> 
    <li class="ui-state-default">Item 2</li> 
    <li class="ui-state-default">Item 3</li> 
</ul> 
: 내가 대신 두 목록 사이에서 항목을 이동을 제외하고, 필요 정확히 꽤 많이있는 드래그 앤 드롭 예제 중 하나를 사용하고, 나는 복제 할 항목을 싶습니다

그래서 첫 번째 목록에서 두 번째 목록으로 항목을 이동하면 목록 1에는 2 개의 항목이 있고 목록 2에는 4 개의 항목이 있습니다. 나는 방울에 아이템의 클론을 만들고 싶습니다. 따라서 위의 예에서, 목록 1은 여전히 ​​3 개 항목이 것이지만, 목록 2는 4 개 항목,

이것은 완벽한 대답하지 당신

답변

0

감사있을 것입니다,하지만 난 추가 ... 을 비슷한 필요 sortable에 대한 remove() 핸들러를 사용하면 제거하려고하는 요소를 복제 할 수 있습니다. 이 시도 : 당신이 그것을 놓을 때

$(function() { 
    $("#sortable1, #sortable2").sortable({ 
     connectWith: '.connectedSortable', 
     remove: function(event,ui){ 
     ui.item.clone().appendTo('#sortable1'); 
    } 
    }).disableSelection(); 
}); 

당신이 sortable2하는 sortable1에서 항목을 드래그하면, 그것은 sortable1의 맨 아래에 추가됩니다. 끌기가 시작될 때 항목을 복제하는 것이 가장 좋으며, 끌기가 실패하면 복제본을 삭제하십시오. 그러나 드래그를 시작할 때 발생하는 이벤트를 찾을 수 없습니다.