HTML5拖放以将div移动到屏幕上的任何位置？

Posted 2023-05-08

【中文标题】HTML5拖放以将div移动到屏幕上的任何位置？

【英文标题】：HTML5 drag and drop to move a div anywhere on the screen?

【发布时间】：2011-11-08 20:31:34

【问题描述】：

标题很清楚。

我发现的所有演示都包括将 div 放到某个位置。例如垃圾桶。我需要制作一个可拖动的 div，它可以放在屏幕上的任何位置。

html5 可以做到这一点吗？如果不是我应该怎么做？

【问题讨论】：

HTML5 Drag and Drop anywhere on the screen 的可能重复项

如果你想用 Jquery 的方式来做，this 是最好的解决方案，而且比纯 javascript 解决方案要容易得多。

【参考方案1】：

真的很简单：

在dragstart 事件中计算用户点击可拖动元素的位置与左上角之间的偏移量 确保将dragover 事件应用于整个文档，以便可以将元素拖放到任何地方 在drop 事件中，使用您通过下拉的clientX 和clientY 计算出的偏移量来计算元素的位置

Here's one 我prepared earlier。对于奖励积分，您可以在dragover event 中更新元素的顶部和左侧位置，如果您允许拖动的位不是需要移动的整个元素，这很有用。

【讨论】：

@Luis，在拖动元素时可以设置iframe pointer-events: none; ，并且可以将元素拖动到 iframe 上