jQuery UI 드래그 가능한 요소가 정렬 가능으로 떨어졌습니다.

Question

나는 드래그 가능한 항목 목록을 가지고 있으며 정렬 가능한 콘텐츠 블록으로 드래그 할 수 있기를 바랍니다.

<div class='items'> 
    <div class="one">One</div> 
    <div class="two">Two</div> 
</div> 

<div class="content"> 
    <div class="block">Foo</div> 
    <div class="block">Bar</div> 
</div> 

것은, 내가 원하는 것을 드래그 된 항목이 즉시 드래그 시작으로 블록을 "가"와이 떨어졌다 때 블록 남아 : 여기 내 마크 업입니다. 나는 이것을 시도 :

$('.items div').draggable({ 
    helper: function(e) { 
     return $('<div>').addClass('block').text($(e.target).text()); 
    }, 
    connectToSortable: ".content" 
}); 

$('.content').sortable();​ 

바이올린 : http://jsfiddle.net/MF4qu/

하지만 블록과 같은 사용자 지정 도우미를 만드는 경우에도, 그것은 즉시 떨어 것 같은 원래 드래그 요소로 돌아갑니다. 누구든지 제대로 내 예제 페이지에 블록을 삽입하는 방법을 알고 있습니까? 이미 UI API를 살펴 보았지만 알아낼 수는 없습니다. 드래그 소자 정렬을 삭제하면

​ 

Answer 1

는, 상기 정렬 update 이벤트를 트리거한다.

이

$('.items div').draggable({ 
    helper: function(e) { 
     return $('<div>').addClass('block').text($(e.target).text()); 
    }, 
    connectToSortable: ".content" 
}); 

$('.content').sortable({ 
    update: function (event, ui) { 
     ui.item.addClass('block'); 
    } 
});​ 

근무 데모 :http://jsfiddle.net/DaXuT/1/