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

OK、私はその仕事をする解決策を見つけました。

ソート可能な機能の「停止」イベントにキャンセルコードがある場合は、キャンセルコードが機能します。ただし、「復帰」が完了した後にのみ適用されます。問題は、私がドロップ可能な「ドロップ」イベントから要素をコピー/元戻ししようとしていて、これが早すぎるということです。

解決策は、「停止」イベントが完了するのを待つことと、これを達成するために「停止待ち」イベントでチェックされる「待機中のコピー」フラグを作成することでした。

Here is an example

それはまだ（UX-的に）右に感じることはありませんが、それは正しい動作し、あなたは常にわずかに良い感触を得るためにソート可能な機能にはfalseに戻す設定することができます。

次のように例のコードがある...

とにかく

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(); 
} 

、うまくいけば、これは、同様の効果をしたい他の人が...何もかかわらず、私のデザインを盗む助けないでしょう;）