如何使用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>

请指出我可以实现目标的其他拖放插件。

Answer 1

你要求的方法就是利用.drop Dragula回调。

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

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

我已经构建了一个应用程序，其中'drop zone'只有一列，因此所有元素都将垂直排列。类似于可排序列表。我使用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指令中你可以读取type属性，并为它输入一些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类，因此在你的.drop回调中你可以遍历drop-container中的DOM元素，找到.gu-transit，然后你知道它所处的索引，并且当您将其推入数据数组时可以为其分配正确的索引属性。

我正在使用Angular作为示例，因为这是我使用的，我认为使用它或其他框架实质上有助于实现此功能。我认为用直接的jQuery做起来要困难得多。