拖动到同一类的不同目标答案

【问题标题】：Dragula drop to different target of the same class拖动到同一类的不同目标
【发布时间】：2018-08-16 18:35:43
【问题描述】：

我需要创建一个功能，其中我在#sourceItems 中包含很少的可拖动对象，它们应该被放置在目标容器 .my-container 之一中，它们的类型相同（类、设计、内容） .

给出以下内容

<div id='sourceItems'>
    <div class='make-it-nice-with-border'>Item One</div>
    <div class='make-it-nice-with-border'>Item Two</div>
    <div class='make-it-nice-with-border'>Item Three</div>
</div>

<div id='destination'>
   <div class='my-container'>
        <span>Some description 1</span>
   </div>
   <div class='my-container'>
        <span>Some description 2</span>
   </div>
   <div class='my-container'>
        <span>Some description 3</span>
   </div>
   <div class='my-container'>
        <span>Some description 4</span>
   </div>
</div>

和 JavaScript 初始化

dragula([document.querySelector('#sourceItems'), 
         document.querySelector('#destination')], 
        {
                revertOnSpill: true 
        });

我能够将对象放置在#destination 容器中，但它们作为元素“my-container”的兄弟元素附加。我想要的是对象应该附加在元素'my-container'中。

我尝试将其更改为，但它根本不起作用。

  dragula([document.querySelector('#sourceItems'), 
             document.querySelector('.my-container')], 
            {
                    revertOnSpill: true 
            });

有人知道我错过了什么吗？

谢谢，

【问题讨论】：

标签： javascript jquery html dragula

【解决方案1】：

问题是 document.querySelector 只返回一个元素。您需要使用 querySelectorAll 并将其转换为数组，然后与 #sourceItems 查询连接。

dragula(
    [ document.querySelector( '#sourceItems' ) ].concat(
        Array.from( document.querySelectorAll('.my-container') )
    ), {
        revertOnSpill: true 
    });

Fiddle

【讨论】：