如何使用 Dragula JS 插件更改拖动时复制的元素

Question

我有一个类似于页面构建器模板编辑器的页面。我使用 Dragula.JS 作为拖放插件，并使用他们的方法复制从其他容器复制元素。这是它的样子：

问题是当我从右侧列拖动并放入左侧框时，元素被复制到右侧列中。这是我的代码：

<div id="2col" class="collapse column-choices">
 <a href="#" class="list-group-item">
        <div class="row">
          <div class="layoutBorder one-half"></div>
          <div class="layoutBorder one-half"></div>
        </div>
      </a>
      <a href="#" class="list-group-item">
        <div class="row">
          <div class="one-four layoutBorder"></div>
          <div class="three-four layoutBorder"></div>
        </div>
      </a>
      <a href="#" class="list-group-item">
        <div class="row">
          <div class="three-four layoutBorder"></div>
          <div class="one-four layoutBorder"></div>
        </div>
      </a>
    </div>

和我的 JS：

 //  the `templateContainer is the right box container`
 dragula([document.getElementById('2col'), document.getElementById('templateContainer')], {
copy: true,
   });

当我将东西拖到左边的盒子容器时，这段代码将放在：

<a href="#" class="list-group-item">
        <div class="row">
          <div class="layoutBorder one-half"></div>
          <div class="layoutBorder one-half"></div>
        </div>
      </a>

那不是我想要的。问题是如何从右容器复制元素以及何时将元素放入左框容器元素将改变我的目标。我将元素更改为：

<div class="element-to-paste">
      This thing will be copy on the left box. From Right.
    </div>

请指出其他可以使我的 objective.

的拖放插件

Answer 1

完成您的要求的方法是利用 .drop Dragula 回调。

.on("drop", function(el, container, source) {}

https://github.com/bevacqua/dragula#drakeon-events

我构建了一个应用程序，其中 'drop zone' 只有一列，因此所有元素都是 lined-up 垂直的。类似于可排序列表。我在我的项目中使用了 Angular，而我的整个 drop-zone 使用了一个 ng-repeat 指令，这只是一种遍历数据数组的方法。例如，它可以是：

var data = [
{
  index: 1,
  type: 'image',
  data: 'image.jpg'
},
{ 
  index: 2,
  type: 'textblock',
  data: 'lorem ipsum, blah blah'
}]

然后在你的 ng-repeat 指令中你可以读取类型属性，并为它输入一些 HTML，比如

<div ng-if="mydata.type='image'">
  <img src='{{ mydata.data}}'>
</div>

<div ng-if="mydata.type='text'">
  <p>{{ mydata.data }}</p>
</div>

要获得元素的正确顺序，您可以使用使用对象索引的 ng-orderBy 指令。

这样放下动作就是一个门面。您实际上从 DOM 中删除了拖动的元素，并将其替换为新元素。

Dragula 在元素被拖动时附加 .gu-transit class，因此在您的 .drop 回调中，您可以循环遍历 [=39= 中的 DOM 元素], 找到 .gu-transit，然后您就知道它所在的索引，并且可以在将其推入数据数组时为其分配正确的索引属性。

我以 Angular 为例，因为我就是这么用的，我认为使用它或其他框架可以极大地帮助实现此功能。我认为直接 jQuery.

会更难

如何使用 Dragula JS 插件更改拖动时复制的元素

How to change elements being copied on dragging using Dragula JS Plugin

javascript

jquery

drag-and-drop

dragula