Question

我正在尝试创建一个UI，其中几个框悬停在其他元素上，每个框都有一个拖动手柄。当用户在任何框上使用拖动手柄时，他们应该能够将框拖动到页面上的任何位置。

为了提供这种交互，我正在使用Shopify的可拖动库，但是在以下几件事上我不清楚：

我已经到了可以使用适当的拖动手柄拖动框的地步，但是框被复制了，重复的副本也被拖动了。如何隐藏框的原始副本，以便仅显示要拖动的版本？这是我必须自己处理的事情吗？
释放手柄后，该框不会移动到新位置，而是会弹回到原始位置。我是否需要使用droppable库将框移动到droppable部分？如果我希望将框放置在页面上的任何位置（作为悬停元素），那么整个主体是否会成为可放置的选择器？目前，这似乎行不通。

我当前的代码是：

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'));

，我在这里创建了一个Codepen： https://codepen.io/khalidadil/pen/QJGVrP

如何正确设置shopify可拖动库？

0 个答案: