Как изменить элементы, копируемые при перетаскивании, с помощью плагина Dragula JS

У меня есть страница, похожая на редактор шаблонов компоновщика страниц. Я использую 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>

Пожалуйста, укажите мне на другой плагин перетаскивания, который может решить мою задачу.


javascript drag-and-drop jquery dragula
person Goper Leo Zosa    schedule 04.01.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Способ сделать то, о чем вы просите, - использовать обратный вызов .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, используя индекс объекта.

Таким образом, падающее действие является фасадом. Фактически вы удаляете перетаскиваемый элемент из DOM и заменяете его новым.

Dragula добавляет класс .gu-transit к элементам во время их перетаскивания, поэтому в вашем обратном вызове .drop вы можете перебрать элементы DOM в своем drop-контейнере, найти .gu-transit, тогда вы знаете индекс, в котором он находится, и может назначить ему правильное свойство индекса, когда вы вставите его в свой массив данных.

Я использую Angular в качестве примера, потому что это то, что я использовал, и я думаю, что использование его или другого фреймворка существенно помогло реализовать эту функциональность. Я думаю, что это было бы намного сложнее сделать с помощью простого jQuery.

person Graham T    schedule 26.01.2016
comment
Спасибо. но я удаляю dragula и вместо этого использую jquery-ui, это так просто в этой библиотеке. :) - person Goper Leo Zosa; 26.01.2016
comment
Действительно крутая реализация перетаскивания HTML5 здесь, если вам интересно: github.com/StackHive/DragDropInterface - person Graham T; 31.01.2016