使用 Dragula 在画布上移动对象

Question

我有一个带有背景图片的画布。我想要可以在画布上移动的对象（按钮或 div）。

我找到了interact.js的完美解决方案。页面上的第一个示例（称为拖动）正是我想要实现的。获取画布上的位置，如果对象移到外面，它会自动回到里面。

但是，我已经在使用dragula对项目进行排序，并且只想保留一个用于拖放功能的库。添加另一个库会增加我的 web 应用程序的复杂性。

用 Dragula 实现这一目标“容易”吗？如果是，如何？

需要一个代码示例才能理解如何操作。

Answer 1

我有一个类似的要求，左侧的项目变成了右侧的便签。这些便利贴需要四处移动。

经过深思熟虑，我设计了一个非常简单的解决方案。我在右侧创建了 4 个独立的拖放区，基本上允许笔记移动。

这确保了排序和拖动功能。