1

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

问题是当我从右侧列拖动并放入左侧框中的元素时，它会完全复制右侧列中的内容。这是我的代码：

<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>

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

4

1 回答 1

3

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

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'
}]

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>

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

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 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.

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.

于 2016-01-26T01:12:21.703 回答