德拉古拉掉落到同一 class 的不同目标

Question

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

给出以下内容

<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 只有 returns 一个元素。您需要使用 querySelectorAll 并将其转换为数组，然后使用 #sourceItems 查询进行连接。

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

Fiddle

德拉古拉掉落到同一 class 的不同目标

Dragula drop to different target of the same class

html

javascript

jquery

dragula