Как правильно настроить перетаскиваемую библиотеку shopify? - PullRequest
Новая
       8

Как правильно настроить перетаскиваемую библиотеку shopify?

0 голосов
/ 13 ноября 2018

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

Чтобы обеспечить это взаимодействие, я использую перетаскиваемую библиотеку от Shopify, но мне неясно,несколько вещей:

  1. Я дошел до того, что я могу перетащить блок, используя соответствующую ручку перетаскивания, но блок дублируется, и дублированная копия перетаскивается.Как скрыть оригинальную копию коробки, чтобы отображалась только тащенная версия?Это то, что я должен обработать самостоятельно?
  2. Когда ручка отпущена, коробка не перемещается в новое местоположение, а вместо этого возвращается в исходное местоположение.Нужно ли использовать библиотеку сбрасываемых файлов, чтобы можно было переместить окно в секцию сбрасываемых данных?Если я хочу иметь возможность разместить рамку в любом месте на моей странице (как элемент наведения), будет ли весь элемент тела переключателем?В настоящее время это не похоже на работу.

Мой текущий код: 

var containers = document.querySelectorAll('.box');

var droppable = new Draggable.Draggable(containers, {
  draggable: '.box',
  handle: '.drag-handle',
  delay: 0,
});

droppable.on('drag:start', () => console.log('drag:start'));
droppable.on('droppable:over', () => console.log('droppable:over'));
droppable.on('droppable:out', () => console.log('droppable:out'));

, и я создал здесь кодовую ручку: https://codepen.io/khalidadil/pen/QJGVrP

...