javascript - 德拉古拉掉落到同一类别的不同目标

Question

我需要创建一个功能，其中 #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 
            });

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

谢谢

Answer 1

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

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

Fiddle