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

编辑：忘了说，我需要YUI来应用拖放功能，但是很多目标恰好位于“目标容器”内，类似于拖动元素的设置方式。我不能硬连接每个div是可以放置的，因为我没有提前多少。

Answer 1

一个解决方案是将drop selector更新为“all”，并在返回的nodeSet上执行每个操作。（而不是使用'#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>');
});

有关DDM的更多信息，请参阅Drag & Drop: List Reorder w/Bubbling示例，以及使用nodeSet.each（）设置多个目标/拖动实例。

使用YUI dragdrop插件的多个放置目标？

1 个答案: