8

ドラッグ可能なもののいくつかのクラスが必要です。それぞれがドロップ可能なもののクラスに対応しています。しかし、それに加えて、適切なドロップ可能アイテムが見つかるまですべてのドラッグ可能オブジェクトをドロップできる、別の「ゴミ箱」が必要です。

これは、accept関数を使用して簡単に実現できます。ただし、最大20のクラスがあり、それぞれに30〜40のドラッグ可能/ドロップ可能があります。したがって、これに「accept」関数を使用すると、ドラッグ可能なものを取得した瞬間に、画面上のすべてのドロップ可能なものに対してテストを実行するときにChromeがフリーズします:(

'scope'プロパティを使用すると、別の方法を使用しているように見えるため、これを解決できます。ただし、スコープを使用する場合、スコープは1つしかないため、「ごみ箱」の概念を実装できないようです。

この問題を回避する方法はありますか？ドラッグ可能アイテムに複数のスコープを指定しますか、それともゴミ箱に多くのスコープを指定しますか？それとも、私が考えられない他の解決策ですか？

4

1 に答える 1

9

内部的には、jQuery UIは、をドラッグし始めるたびに次のコードを実行して、を受け取る資格がdraggableあるかどうかを判断します。droppabledraggable

var m = $.ui.ddmanager.droppables[t.options.scope] || [];
var type = event ? event.type : null; // workaround for #2317
var list = (t.currentItem || t.element).find(":data(droppable)").andSelf();

droppablesLoop: for (var i = 0; i < m.length; i++) {

    if(m[i].options.disabled || (t && !m[i].accept.call(m[i].element[0],(t.currentItem || t.element)))) continue;   //No disabled and non-accepted
    for (var j=0; j < list.length; j++) { if(list[j] == m[i].element[0]) { m[i].proportions.height = 0; continue droppablesLoop; } }; //Filter out elements in the current dragged item
    m[i].visible = m[i].element.css("display") != "none"; if(!m[i].visible) continue;                                   //If the element is not visible, continue

    if(type == "mousedown") m[i]._activate.call(m[i], event); //Activate the droppable if used directly from draggables

    m[i].offset = m[i].element.offset();
    m[i].proportions = { width: m[i].element[0].offsetWidth, height: m[i].element[0].offsetHeight };

}

ご覧のとおり、コードは簡単ではなく、ドラッグを開始するたびにパフォーマンスが低下する理由を説明しています。

注意すべきことの1つは、で最初にチェックされるのは、が無効になってdroppablesLoopいるかどうかdroppableです。

したがって、パフォーマンスを向上させるために、適切なdroppableウィジェットを常に手動で無効にすることができます。これにより、上記のコードブロックからすばやくジャンプできます。これを行うには、が最初に発生するstartイベントを使用します。draggable

$('.draggable').draggable({
    start: function() {
        $('.invalid-droppable-elements').droppable('option', 'disabled', true);
    },
    stop: function() {
        $('.invalid-droppable-elements').droppable('option', 'disabled', false);
    }
});

これにより、基本的にaccept/scopeロジックを自分で実装することになり、パフォーマンスへの影響はアルゴリズム次第です。ただし、実装するのはそれほど悪くないはずです。プラグインが遅いのは、さまざまな状況に対応する必要があるためです。

draggablejQuery UIは、個々の/要素への複数のスコープの追加をサポートしていませんdroppableが、その機能を独自にロールすることができます。

ここにこれを示すために例をまとめました-http://jsfiddle.net/tj_vantoll/TgQTP/1/。

于 2012-06-17T02:33:48.253 に答える