javascript - 使用智能捕捉指南进行拖放
我目前正在构建一个小部件，允许用户为特定于应用程序的任务设计布局。我想为用户提供一个 powerpoint/keynote 风格的界面（la 280slides）。但是，我还想提供“快照指南”（抱歉，我没有更好的词语来描述它们），它们基本上是帮助用户对齐页面上的多个元素的指南。
在 Flash IDE 中可以看到这样的一个例子，在拖动时，IDE 会自动计算外围对象的尺寸和位置，并尝试对齐它们。 mockingbird 应用程序 (https://gomockingbird.com/mockingbird/) 实现了类似的功能。 （提示：尝试拖动一些对象，看看有哪些参考线尝试将对象对齐在其边界框中）。
我相信通过在视口上缓存元素数组并计算每个元素的位置和尺寸以找到最适合的捕捉，可以实现类似的效果。但是，如何计算被拖动元素最可能的位置呢？有其他解决方案吗？
请有更了解的人赐教！ :)
I am currently building a widget that will allow users to design a layout for an application-specific task. And I would like to provide a powerpoint/keynote-esque interface (a la 280slides) for the users. However, I would also like to provide "snap guides" (sorry, I do not have any better words to describe them) which are basically guides taht help users align multiple elements on the page.
An example of this can be seen in the Flash IDE where, upon dragging the IDE automatically calculates the dimension and position of peripheral objects and attempts to align them. The mockingbird application (https://gomockingbird.com/mockingbird/) achieves something similar. (Hint: try dragging some objects and see how there are guides which attempt to align the object in their bounding boxes).
I believe a similar effect could be achived by caching an array of elements on the viewport and calculating the position and dimension of each element to find the best-fit snap. However, how do I calculate the most-probable position of the element being dragged? Are there any alternative solutions?
With someone with better knowledge, please enlighten me! :)
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
我建议使用已经编写的库来完成此任务。例如，jQuery UI 的 Draggable 正是这样做的，并且非常可定制。
I suggest using a library that has already been written to accomplish this. For example, jQuery UI's Draggable does exactly this and is very customizable.