jQuery Draggable + Sortable - ソートへのドロップを拒否する方法は？

Question

私は、ビデオとドラッグ可能なビデオの並べ替えのリストを持っています。基本的には、ドラッグされたビデオが最初の5分のビデオに含まれていないことを確認したいと思います。ビデオの長さが変わるので、私はドロップでこれをテストしたい - 5分後に復帰してエラーを表示するまでの時間を加えてください。

私は、私のテストを行うためにdraggableとsortable（ドキュメント化されていない復帰コールバックを含む）のコールバックのすべてにフックしようとしましたが、私は何をしようと、ドームは常に変更され、ソート可能更新コールバックを呼び出します...

誰にも提案はありますか？

Answer 1

あなたはdraggableウィジェット（その方法が文書化されていないですが、その名前は間違いなく確実に使用することは「より安全」になり、アンダースコア、始まらない）のcancelメソッドを呼び出すことにより、ドラッグ操作を元に戻すことができます。ただし、startイベント中にのみ動作しますが、他のイベントが遅すぎて復帰アニメーションをトリガしないためです。あなたはまた、新たに追加された項目を削除する必要がありますので（stopイベント中startイベントがあまりにも早く発生すると、）

しかし、sortableウィジェットはまだ、ドラッグ操作がキャンセルされた場合でも、ドロップを登録します。

$("#yourSortable").sortable({ 
    start: function(event, ui) { 
     if (!canDropThatVideo(ui.item)) { 
      ui.sender.draggable("cancel"); 
     } 
    }, 
    stop: function(event, ui) { 
     if (!canDropThatVideo(ui.item)) { 
      ui.item.remove(); 
      // Show an error... 
     } 
    } 
}); 

結果はthis fiddleで表示されます（4番目の項目は常に元に戻ります）。

更新：ジョンKurlakは当然のコメントで指摘するように、項目があるためdraggable("cancel")への呼び出しの戻りませんが、ui.senderは、我々の場合でnullですので。何かを投げると同じ振る舞いになります。

ああ、私は場所を取るアニメーションせずに逆戻りされている項目に結果を試してみました他のすべての組み合わせなので、多分私たちの最善の策は、ui.senderにアクセスしないよう、代わりのようなものを書くことです：

start: function(event, ui) { 
    if (!canDropThatVideo(ui.item)) { 
     throw "cancel"; 
    } 
} 

キャッチされない例外しかし、コンソールにはまだ表示されます。

Answer 2

私は別の方法を発見しました。あなたの心は、それはそれに戻って、フローティングのアニメーションを持っていないいけない場合は、元の場所は、あなたはいつも私がドロップイベントにいずれかの方法を必要とするので、私はこれを使用し、この

.droppable({ 
    drop: function (event, ui) { 

     var canDrop = false; 

     //if you need more calculations for 
     //validation, like me, put them here 

     if (/*your validation here*/) 
      canDrop = true; 

     if (!canDrop) { 
      ui.draggable.remove(); 
     } 
     else{ 
      //you can put whatever else you need here 
      //in case you needed the drop anyway 
     } 
    } 
}).sortable({ 
    //your choice of sortable options 
}); 

を使用することができます。