javascript - 使用 YUI 拖放插件实现多个放置目标？

Question

基本上，我想扩展这个 YUI 示例/演示，以便我有多个目标框可供选择，而不是只有一个在将元素拖入其中时更新的“目标”框。雅虎官方示例可以在以下位置找到: http://developer.yahoo.com/yui/3/examples/dd/delegate-drop.html

相关代码:

<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 ...”等进行绑定(bind)，但结果是无论我拖入哪个框，只有最后一个框一个会更新(我认为是因为与 Javascript 中的闭包有关)

编辑:忘了说，我需要 YUI 将放置功能应用于“目标容器”内的许多目标，类似于拖动元素的设置方式。我无法将每个 div 硬连接为可删除，因为我不知道提前会有多少个。

Answer 1

一种解决方案是将删除选择器更新为“all”，并在返回的节点集上执行每个操作。 (您可以使用“drop”类指定多个节点，而不是使用“#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() 设置多个目标/拖动实例的示例。