javascript - 使用智能捕捉指南拖放

时间:2012-01-07 06:23:03

标签: javascript drag-and-drop snapping

我目前正在构建一个小部件,允许用户为特定于应用程序的任务设计布局。我想为用户提供一个powerpoint / keynote-esque界面(la 280slides)。但是,我还想提供“快照指南”(对不起,我没有任何更好的词语来描述它们),它们基本上是指导帮助用户对齐页面上的多个元素。

在Flash IDE中可以看到这样的示例,其中在拖动IDE时自动计算外围对象的尺寸和位置并尝试对齐它们。 mockingbird应用程序(https://gomockingbird.com/mockingbird/)实现了类似的功能。 (提示:尝试拖动一些对象,看看有没有指南试图在边界框中对齐对象)。

我相信通过在视口上缓存元素数组并计算每个元素的位置和尺寸以找到最合适的快照,可以获得类似的效果。但是,如何计算被拖动元素的最可能位置?有没有其他解决方案?

有了更好的知识的人,请赐教! :)

1 个答案:

答案 0 :(得分:0)

我建议使用已经编写完成此操作的库。例如,jQuery UI的Draggable就是这样做的,并且非常可定制。