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并将其转换为Array，然后与#sourceItems查询并置。

ForEach-Object

Fiddle

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

1 个答案: