使用YUI dragdrop插件實現多個放置目標？

基本上我想擴展這個YUI的例子/演示，這樣就不需要有一個單獨的「目標」框，當元素被拖入它時，它會被更新，我有幾個目標框可供選擇。官方雅虎的例子可以在 http://developer.yahoo.com/yui/3/examples/dd/delegate-drop.html 使用YUI dragdrop插件實現多個放置目標？

找到相關代碼：

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

我一直在試圖建立這樣的日子，但有太多的因素，我不明白。我做的一件事是編寫一個循環，循環遍歷每個目標框，並執行'var drop = Y.one ...'等的綁定，但結果是無論我拖入哪個框，只有最後一個一個會更新（因爲與Javascript關閉有關的事情我認爲）

編輯：忘了說，我需要YUI應用拖放功能，然而很多目標發生在'目標容器'內，類似於拖動元素如何設置。我不能硬連接每個div，因爲我沒有預先提供多少個div。

來源

2011-01-28 Andrew M

解決方法之一是將drop drop更新爲「all」，並在返回的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>'); 
});

看到Drag & Drop: List Reorder w/Bubbling例如用於更上DDM，以及使用nodeSet.each（）來設置多個目標/阻力實例。

來源

2011-05-08 00:12:13 kaia

使用YUI dragdrop插件實現多個放置目標？

回答

相關問題