5

我使用 Dragula 在我的应用程序上实现了拖放，但我需要设置它以便我可以将我的元素拖放到多个 div 中。

我尝试使用一个类来实现它，但它只是激活了我的第一个 div。

HTML：

    <div role="presentation" class="table table-striped">
        <div class="files"  id="upload-file"></div>
    </div>
    <div class="col-md-4">
        <div class="drag-container">Test 1</div>
        <div class="drag-container">Test 2</div>
        <div class="drag-container">Test 3</div>
    </div>

调用 Dragula 的 JS：

dragula([document.querySelector('#upload-file'), document.querySelector('.drag-container')]);

如何将 te 项目放到多个 div 中？

4

4 回答 4

6

你可以定义一个数组容器：

var containers = $('.drag-container').toArray();
containers.concat($('#upload-file').toArray());

然后，将 var 'containers' 传递给 dragula 初始化程序：

dragula(containers, {
                isContainer: function (el) {
                    return el.classList.contains('drag-container');
                }
            });
于 2015-12-14T15:33:41.410 回答
4

对于那些没有 jQuery 或者$你可以使用：

dragula([].slice.call(document.querySelectorAll("drag-container")));

这会将 NodeList 转换为数组并将其传递给 dragula。

于 2019-02-23T10:04:36.120 回答
2

querySelector 仅返回单个元素，您需要使用 querySelectorAll 才能获取元素列表。不确定 Dragula 如何处理获取一个双元素数组，第二个元素是一个数组。您可能希望首先生成数组，将“#upload-file”添加到该数组，然后传递该数组。或者您可以在初始化后生成数组，然后循环遍历数组，使用诸如“drake.containers.push(container);”之类的东西动态添加元素。我直接从 github 站点https://github.com/bevacqua/dragula得到了这个构造

于 2015-11-23T10:45:08.520 回答
1

HTML：

<div className="wrapper">
   <div className="container col-md-4" id="A">
     <div className="panel panel-white">
     </div>
     <div className="panel panel-white">
    </div>
   </div>
   <div className="container col-md-4" id="B">
     <div className="panel panel-white">
     </div>
     <div className="panel panel-white">
    </div>
   </div>
</div>

JS：

dragula([document.querySelector('#A'), document.querySelector('#B')]);

您可以将一列中的每个项目拖到另一列。您可以使用容器的类名添加更多列。如果要指定自定义类名，则应定义如下选项：

选项：

 let options = {
        isContainer: (el) => {
          return el.classList.contains('drag-container'); // The immediate elements in this container will be draggable
        }
于 2016-10-15T11:52:58.910 回答