複数のドロップターゲットとYUIドラッグドロッププラグイン？

Question

基本的には、このYUIの例/デモを拡張して、要素がドラッグされたときに更新する単一の 'ターゲット'ボックスを持つのではなく、いくつかのターゲットボックスを選択できます。私は日のためにこれを構築しようとしてきたが、私は理解していない、あまりにも多くの要因があります

<div id="play"> 

    <div id="demo"> 
     <ul> 
      <li>Item #1</li> 
      <li>Item #2</li> 
      <li>Item #3</li> 
      <li>Item #4</li> 
      <li>Item #5</li> 
      <li>Item #6</li> 
      <li>Item #7</li> 
      <li>Item #8</li> 
      <li>Item #9</li> 
      <li>Item #10</li> 
     </ul> 
    </div> 

    <div id="drop">Drop on me</div> 
</div> 

<script> 

YUI({ filter: 'raw' }).use('dd-delegate', 'dd-drop-plugin', function(Y) { 
    var del = new Y.DD.Delegate({ 
     container: '#demo', 
     nodes: 'li' 
    }); 

    del.on('drag:end', function(e) { 
     del.get('currentNode').setStyles({ 
      top: 0, 
      left: 0 
     }); 
    }); 

    var drop = Y.one('#drop').plug(Y.Plugin.Drop); 
    drop.drop.on('drop:hit', function(e) { 
     drop.set('innerHTML', 'You dropped: <strong>' + e.drag.get('node').get('innerHTML') + '</strong>'); 
    }); 


}); 
</script> 

：公式ヤフーの例は http://developer.yahoo.com/yui/3/examples/dd/delegate-drop.html

に関連するコードを見つけることができます。私がしたことの1つは、各ターゲットボックスを循環し、 'var drop = Y.one ...'などのバインディングを行うループを作成することでしたが、その結果は、どのボックスをドラッグしても、最後のもの私は思うのを忘れて、多くのターゲットがドロップコンテナを 'ターゲットコンテナ'内にあるようにするためにドロップ機能を適用する必要があります。ドラッグ要素がどのように設定されているか私は、各部門が事前にどれだけ多く存在するかを知ることができないので、各部門を廃棄可能にすることはできません。

Answer 1

解決策の1つは、ドロップセレクタを「すべて」に更新し、nodeSetでそれぞれを返すことです。 （代わりに「#drop」で指定された単一ノードのドロップターゲットを有するので、あなたは「ドロップ」のクラスに指定された複数のを持つことができます。）

var dropNodes = Y.all('.drop').plug(Y.Plugin.Drop); 
dropNodes.each(function(v, k) { 
    var tar = new Y.DD.Drop({ 
     node: v 
     }); 
    });  

、また、DDM（ドラッグドロップマネージャを使用すると便利になります）を使用して、各ドロップターゲットにリスナーを追加するのではなく、イベントを待機します。

Y.DD.DDM.on('drag:drophit', function(e) { 
    var drop = e.drop.get('node'), 
     drag = e.drag.get('node'); 
    drop.set('innerHTML', 'You dropped: <strong>' + drag.get('innerHTML') + '</strong>'); 
}); 

は、DDMの詳細についてはDrag & Drop: List Reorder w/Bubbling例を参照、ならびに複数のターゲット/オレンジ色のインスタンスを設定するnodeSet.each（）を使用します。