使用dragula在canvas

时间:2018-01-19 14:34:02

标签: javascript html5 dragula interact.js

我有一张带有背景图片的画布。我希望有可以在画布上移动的对象(按钮或div)。

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

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

它是否容易"用拖拉来实现这个目标?如果有,怎么样?需要一个代码示例来理解如何。

1 个答案:

答案 0 :(得分:2)

我有一个类似的要求,其中左侧的项目变成了右侧的便笺。这些便签需要四处移动。

经过深思熟虑,我设计了一个非常简单的解决方案。我在右侧创建了4个单独的拖放区,基本上可以使笔记四处移动。

这可以确保排序和拖动功能。

参考视频:https://youtu.be/_jsM1kn6nBk