複数のスコープを持つドラッグ/ドロップ可能なJQuery UI？

Question

私はdraggablesのいくつかのクラス、droppablesのクラスに対応する各1を持っていると思います。しかし、さらに、別の「ゴミ箱」を用意したいと思っています。そこでは、適切な垂れ落ちるものが見つかるまで、すべてのドラッグを落とすことができます。

さて、これは簡単に受け入れる機能を実現することができます。しかし、私は最大20のクラスを持っていて、それぞれは30-40ドラブル/ドロップ可能です。だから、もし私が "受け入れ"機能を使用すると、私はドラッグ可能なものを拾うと、画面上のすべてのドロップ可能なテストを実行するので、クロームが凍結します:(

これは、私はスコープを使用すると、1つのスコープしか持てないので、 "ゴミ箱"のコンセプトを実装するように見えません。

何らかの方法がありますかこの問題を回避するには？draggablesに複数のスコープを渡すか、または多くのスコープを廃棄するか、それとも考えていないかもしれませんか？

Answer 1

内部的にjQuery UIは、 draggableをdにドラッグするどのdroppableがdraggableを受け取る資格があるか決定します。

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

} 

あなたはコードが非自明であり、あなたはパフォーマンスの低下にあなたがドラッグを開始するたびに見ている理由を説明するだろう見ることができるように。

droppablesLoopで最初にチェックされたことは、droppableが無効かどうかです。したがって

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

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

これは本質的に、あなた自身やパフォーマンスへの影響があなたのアルゴリズム次第ですaccept/scopeロジックを実装します。しかし、実装するのは悪いことではありません。プラグインがそれほど遅い理由は、さまざまな状況で処理する必要があるためです。

jQuery UIでは、個々のdraggable/droppable要素に複数のスコープを追加することはできませんが、自分でその機能を使用することはできます。 http://jsfiddle.net/tj_vantoll/TgQTP/1/ -

私はここにこれを示すために一緒に例を置きます。