16

まず、このサイトと他のサイトの両方でこの質問が以前に尋ねられたことは知っていますが、私のシナリオでは回答がすべてゴミであり (完全にゴミではない場合)、(少なくともここの質問: jQuery UI drop eventでは) sortable でのドロップ可能な火の数）、提案は完全にオフにすることです.sortableが、これは私がやりたいことではないことは間違いありません。

さて、私はこのjqueryを持っています（オプションやhtml IDがばかげているように見える場合は覚えておいてください。これはテスト用であるため、これを試して理解することができます）：

$(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>

重複する div などはありません。 「なぜ」これが起こっているのかsortableを理解していると思います(デフォルトでドラッグ可能なプロパティを取得するため)。それについては何もできないようです。sortable

もちろん、問題は...

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

...一度だけ必要なときに、2 回トリガーされています。

この問題には簡単な解決策があると思います。なぜなら、この問題を修正するために複雑なスクリプトを大量に作成する必要がある場合は、これらの特定の jquery ウィジェットに苦労する価値はないと思うからです。おそらく私は混乱しているだけですか？

4

3 に答える 3

2

同様の問題がありました。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...
    }
}
于 2015-05-09T05:42:03.693 に答える
-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);
于 2014-06-17T06:17:48.203 に答える