jQuery UIドロップ可能なウィジェットのドロップイベントが2回発生

Question

まず、この質問はこのサイトと他のサイトの両方で以前に尋ねられたことがわかりましたが、回答はすべて自分のシナリオではごみです（完全にゴミがない場合）。 （少なくとも質問の場合：jQuery UI drop event of droppable fires on sortable）、提案はちょうど.sortableを完全にオフにすることです。これは私がやりたいことではありません。

さて、私は（私がしようとすると、これを把握することができますので、任意のオプションまたはHTML IDが愚か見れば、これは単なるテストのためであるに注意してください）このjqueryのを持っている：

$(function() { 
    $("#sortable").sortable({ 
     revert: true 
    }); 
    $("#draggable, #draggable2").draggable({ 
     connectToSortable: "#sortable", 
     helper: "clone", 
     revert: "invalid" 
    }); 

    $("#sortable").droppable({ 
     drop: function (event, ui) { alert("done been triggered."); } 
    }); 

    $("ul, li").disableSelection(); 
}); 

そして、ここでは有効です。マークアップ：

<div class="objectPaletteHolder"> 
    <ul> 
     <li id="draggable" class="ui-state-highlight">Drag me down</li> 
     <li id="draggable2" class="ui-state-highlight">Drag this down, too</li> 
     <li id="draggable2" class="ui-state-highlight">Drag this down, also</li> 
     <li id="draggable2" class="ui-state-highlight">Drag this down, as well</li> 
     <li id="draggable2" class="ui-state-highlight">Drag this down, too</li> 
     <li id="draggable2" class="ui-state-highlight">Drag this down, too</li> 
     <li id="draggable2" class="ui-state-highlight">Drag this down, too</li> 
     <li id="draggable2" class="ui-state-highlight click">Drag this down, click</li> 
     <li id="draggable2" class="ui-state-highlight clicky">Drag this down, clicky</li> 
    </ul> 
</div> 
<div class="editContainer"> 
    <ul id="sortable"> 
     <li class="ui-state-default">Item 1</li> 
     <li class="ui-state-default">Item 2</li> 
     <li class="ui-state-default">Item 3</li> 
     <li class="ui-state-default">Item 4</li> 
     <li class="ui-state-default">Item 5</li> 
    </ul> 
</div> 

は私がsortable div要素またはそのようなものを重複していない、と私はを理解すると思う「なぜ」（？sortableはデフォルトでdraggablesのプロパティを取得するため）これが起こっている、私はできませんsそれについては何もしないでください。

問題は、もちろん、それは一度だけ必要な時...

drop: function (event, ui) { alert("done been triggered."); } 

が...、二回トリガされていることです。

私はこれらの特定のjqueryウィジェットがすべての問題の価値がないと思うよりも、この問題が複雑なスクリプトの修正を必要とする場合、この問題に対する簡単な解決策があると思います。多分私はちょうど混乱していますか？

Answer 1

これは、同じ要素にsortableとdroppableの両方を使用して既知の問題です。

代わりにsortableのreceiveイベントを使用できます。

jsFiddle Demo

$("#sortable").sortable({ 
     revert: true, 
     receive: function (event, ui) {  
      alert("receive been triggered."); 
     } 
}).droppable({ }); 

Answer 2

たぶん私は少し遅すぎたんだけど、私はうまくいけば、それが誰かを助けるの投稿です。これは私が使用するコードです。基本的には、関数が2回呼び出されると、その間の間隔はすばやく（人間が通常行うよりも速い）、200ミリ秒に設定します。

私はlocalStorageを使って "last_call"という変数を設定しました。関数が呼び出されたのはその時です。次の呼び出しで、関数が以前に呼び出されたかどうかを確認します。呼び出されなかった場合、関数は実行を継続します。呼び出された場合は、最後に呼び出されたときを確認します。それが200ミリ秒以内に呼び出された場合（明らかに人間の呼び出しではなく機械呼び出し）、我々はそれを再び呼び出さない。

var d = new Date(); 
    var this_time = d.getTime(); 
    if (localStorage.getItem("last_call") != null) 
    { 
     if ((this_time - parseInt(localStorage.getItem("last_call"))) < 100) 
     { 

      return; 
     } 

    } 
    localStorage.setItem("last_call", this_time); 

Answer 3

私は同様の問題がありました。 2つのドロップ可能な要素があり、そのうちの1つは相対的な位置を持ち、もう1つは絶対的な位置にありました。それらはネストされていませんでしたが、絶対位置を持つ部分の一部は、相対位置を持つ部分の上にありました（jQueryドキュメントでは、これは「交差」と呼ばれています）。ドラッグ可能な要素を「絶対」ドロップ可能に移動すると、ドロップイベントが2回トリガーされました。私は数日間探していますが、解決策は見つかりませんでした。

次に、簡単な一般的な回避策をとることにしました。非常に魅力的ではないように見えますが、これは2つのドロップイベントを発射するどんな状況でも役立ちます。

drop: function(e, ui) { 
    if (! $('.already-dropped').length) { 
     $('body').addClass('already-dropped'); 
     setTimeout(function() { 
      $('.already-dropped').removeClass('already-dropped'); 
     }, 100); 
     // callback code... 
    } 
}