jQuery를 UI 드래그 가능한, 낙하 할과 정렬 가능한

Question

작업 I 드래그 항목 (#doc-editor-options ul li)의 ul 있고, 소트 (#items-holder) 이러한 항목을 유지하는 이러한 항목 (#doc-editor-content) 그 영역 내의 ul 적하 면적. 이 드래그 앤 드롭은 일방적이며 목록의 항목 만 드래그하여 홀더에 드롭 할 수 있습니다.

1. 이 지금 나는 목록에서 항목을 드래그하여 다른리스트에 놓을 때, .droppable()에 대한 drop 콜백이 두 번 호출됩니다 내가 가진

   $("#doc-editor-options ul li").draggable({ 
       helper: 'clone', 
       connectToSortable: '#item-holder', 
       containment: $(".doc-editor") 
   }); 
   $("#doc-editor-content").droppable({ 
       drop: function(e, ui){ 
        console.log('dropped'); 
       } 
   }); 
   $("#item-holder").sortable({ 
       placeholder: 'placeholder-highlight', 
       cursor: 'pointer', 
   }); 
   

   두 질문입니다. 나는 이것이 #item-holder을 정렬 할 수있는 것과 관련이 있다고 생각한다. 항목을 목록에 넣을 때 콜백에 해당 항목의 event 및 ui에 대해서만 알면 해고되기를 원합니다.

2. 기본적으로 items-holder은 정렬 할 수없는 기능이 필요합니다. 정렬 할 수있는 유일한 시간은 항목을 드래그하여 가리 키는 경우입니다. 그래서 기본적으로 목록을 정렬 할 수는 없지만 항목을 끌어서 놓으면 목록에 해당 항목을 배치 할 위치를 선택할 수 있습니다 (즉 목록이 정렬 가능). 일단 놓으면 목록이 정렬되지 않습니다. 다시.

편집 : 나는, # 2를 알아 낸 나는 다음 mouseup에 비활성화 정렬 가능 드래그 항목에 mousedown을 결합 할 필요가 있었다. # 1에서 여전히 문제가있는 것 같습니다. 항목을 삭제하거나 항목 소유자 밖으로 마우스를 가져 가면 sortable 이벤트 중 일부에서 drop 콜백이 발생하는 것으로 보입니다.

Answer 1

1 : connectToSortable도 하락을 유발하기 때문에

당신의 하락()가 두 번 호출됩니다().

내 제안은 $ ("# doc-editor-content") .delppable()을 모두 삭제하고 대신 sort (e, ui) 핸들러를 추가하는 것입니다.

2 :

수정 사항이 적용됩니다. 그러나 나는 훨씬 더 쉬운 대안을 제안 할 것이다 : sortable을 항상 사용 가능 상태로두고 "handle : h2"옵션을 추가한다. (LI 내에 존재하지 않는 태그를 선택하십시오.) 이렇게하면 목록에 드롭 할 수 있지만 사용자 정렬은 내부에서 비활성화됩니다.

예 :

$('#item-holder').sortable({ 
    placeholder: 'placeholder-highlight', 
    cursor: 'pointer', 
    handle: 'h2', 
    receive: function(e, ui) { 
    console.log('dropped'); 
    } 
});