如何使用Dragula JS插件更改拖动时复制的元素 [英] How to change elements being copied on dragging using Dragula JS Plugin

问题描述

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

I have a page which is similar to page builder template editor. Im using Dragula.JS as a plugin for drag and drop and used their method copy to copy elements from other container. This is what it looks like:

问题是，当我从右侧列拖动并放在左侧框中时，元素被完全复制到右侧列中.这是我的代码:

The problem is when I drag from right side columns and put in the left box elements are copied exactly what it is on the right columns. This is my code:

<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,
   });

当我将东西拖到左盒容器中时，该代码将被放置:

When I drag things to left box container this code will be put on:

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

那不是我想要的.问题是如何从右侧容器中复制元素，以及何时将其放置到左侧盒中，容器元素将改变我的目标.我将元素更改为:

That is not I want. Question is How to copy elements from right container and when put to left box container elements are going to changed this my aim. I will change elements to:

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

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

Please point me on other drag and drop plugin that can make my objective.

推荐答案

执行您的要求的方法是利用.drop Dragula回调.

The way to do what your asking is to utilize the .drop Dragula callback.

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

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

我建立了一个应用程序，其中放置区域"只有一列，因此所有元素都将垂直排列.类似于可排序列表.我在项目中使用了Angular，而整个拖放区都使用了ng-repeat指令，这只是循环遍历数据数组的一种方式.例如，它可能是:

I've built one app where the 'drop zone' only had one column, so all elements would be lined-up vertically.. Similar to a sortable list. I used Angular for my project and my whole drop-zone used an ng-repeat directive, which is just a way to loop through an array of data. For an example it could be:

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

然后在ng-repeat指令中，您可以读取type属性，并为其添加一些HTML，例如

Then in your ng-repeat directive you can read the type property, and put in some HTML for it, like

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

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

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

To get the correct order for your elements, you could use the ng-orderBy directive using the object's index.

通过这种方式，放置动作是一种外观.您实际上是从DOM中删除了被拖动的元素，并用一个新元素替换了它.

This way the dropping action is a facade. You actually remove the dragged element from the DOM and replace it with a new one.

Dragula在拖动元素时将.gu-transit类添加到元素，因此在.drop回调中，您可以循环遍历drop-container中的DOM元素，找到.gu-transit，然后就知道索引了，并在将其推入数据数组时可以为其分配正确的索引属性.

Dragula appends a .gu-transit class to elements while they're being dragged, so within your .drop callback you can loop through the DOM elements in your drop-container, find the .gu-transit, then you know the index that it's at, and can assign it a correct index property when you push it into your data array.

我以Angular为例，因为这就是我使用的语言，我认为使用它或其他框架实质上有助于实现此功能.我认为使用简单的jQuery会困难得多.

I'm using Angular as an example because that's what I used, and I think using it or another framework substantially helped implement this functionality. I think it'd be a lot more difficult to do with straight jQuery.

这篇关于如何使用Dragula JS插件更改拖动时复制的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！