JQuery UI : 취소 Droppable Drop시 정렬 가능

Question

JQuery 1.5.1 및 JQuery UI 1.8.11을 사용하고 있습니다.

여러 항목에 대해 정렬 가능한 항목을 추가했습니다. 여기서는 정렬을 끌기 위해 드래그를 허용합니다. 모든 항목이 정상적으로 작동합니다.

그러나 나는 또한 항목이 "나를 복사"영역에 드롭 할 수 있도록 낙하 할 통합 할 - 작업은 (나중에 그 장면을 작동)

문제 항목을 복제 할 수있을 것 드롭 가능한 대상이 정렬 가능한 목록의 맨 아래에 있으며 (나는 이것을 이동하지 않으려합니다) 드롭이 발생하면 정렬 가능한 항목이 목록의 맨 아래로 이동합니다.

내가 원하는 것은 놓기 이벤트가 발생하면이 정렬을 취소하는 것입니다.

You can see my problem in action here (단지 지역 "항목을 복사하는 드롭"는에 "항목 1"을 드래그하면 정렬이 취소되지 않습니다 볼 수 있습니다)

당신하여 드롭 가능한 "드롭 다음 내가 시도 볼 수 있듯이 "내가 찾고 있어요 효과를 복사 드롭"나는 이것을 달성하는 방법에 대한 다른 권고 개방도 오전 이벤트 (JQuery와 UI 문서에서 제안)하지만이 작동하지 않는 것 ...

$(this).sortable('cancel'); 

".

고마워요.

Answer 1

좋아요, 그래서 나는 그 일을하는 해결책을 찾아 냈습니다.

정렬 가능한 기능의 "중지"이벤트에 취소 코드가있는 경우 작동하지 않습니다. 그러나 "되돌리기"가 완료된 후에 만 ​​적용됩니다. 문제는 내가 droppable "drop"이벤트에서 요소를 복사/되 돌리려고했는데 너무 빠르다는 것입니다.

해결 방법은 "중지"이벤트가 완료 될 때까지 기다리는 것입니다.이 작업을 수행하려면 "정지 대기"이벤트에서 "복사 대기 중"플래그를 작성해야합니다.

Here is an example

아직 (UX-현명한) 느낌이 좋지 않습니다하지만 올바른 작동, 당신은 항상 약간 더 나은 느낌을 얻을 수있는 정렬 기능에 대한 거짓으로 되돌아 설정할 수 있습니다.

다음과 같이 예제의 코드는

... 어쨌든

var itemCount = 3; 
var awaitingCopy = false; 

$(init); 

function init() { 
    $("#Items").sortable({ 
     revert: true, 
     placeholder: "ItemPlaceHolder", 
     opacity: 0.6, 
     start: StartDrag, 
     stop: StopDrag 
    }); 

    $("#CopyItem").droppable({ 
     hoverClass: "CopyItemActive", 
     drop: function(event, ui) { 
      awaitingCopy = true; 
     } 
    }); 

    $("#NewItem").click(function(e) { 
     e.preventDefault(); 
     itemCount++; 
     var element = $("<div class='Item'>Item " + itemCount + "</div>"); 
     $("#Items").append(element); 
     element.hide().slideDown(500); 
    }); 
} 

function CopyItem(element) { 
    awaitingCopy = false; 
    var clone = element.clone(); 
    $("#Items").append(clone); 
    clone.hide().slideDown(500); 
} 

function StartDrag() { 
    $("#NewItem").hide(); 
    $("#CopyItem").show(); 
} 

function StopDrag(event, ui) { 
    if (awaitingCopy) { 
     $(this).sortable('cancel'); 
     CopyItem($(ui.item)); 
    } 
    $("#NewItem").show(); 
    $("#CopyItem").hide(); 
} 

, 희망이 동일한 효과를 원하는 다른 사람이 ... 더 비록 내 디자인을 훔치는 데 도움이되지 않습니다)