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

我构建了一个应用程序，其中“拖放区”只有一列，因此所有元素都将垂直排列。类似于可排序列表。我在我的项目中使用了 Angular，我的整个拖放区都使用了 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 指令。

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

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

我以 Angular 为例，因为这就是我所使用的，而且我认为使用它或其他框架可以极大地帮助实现此功能。我认为直接使用 jQuery 会困难得多。