javascript - 使用 Dragula 在 Canvas 上移动对象

Question

我有一张带背景图片的 Canvas 。我想要可以在 Canvas 上移动的对象(按钮或 div)。
我用 interact.js 找到了完美的解决方案.页面上的第一个示例(称为拖动)正是我想要实现的。获取 Canvas 上的位置，如果对象被移到外面，它会自动回到里面。
但是，我已经在使用 dragula对项目进行排序，并希望只保留一个用于拖放功能的库。添加另一个库会增加我的 webapp 的复杂性。
用dragula实现这一目标是否“容易”？如果是，如何？
需要一个代码示例才能理解如何。

Answer 1

我有一个类似的要求，左侧的项目变成了右侧的便签。这些便签需要四处移动。
经过深思熟虑，我设计了一个非常简单的解决方案。我在右侧创建了 4 个单独的拖放区，基本上可以移动音符。
这确保了排序和拖动功能。
引用视频:https://youtu.be/_jsM1kn6nBk