使用 HTML5 原生拖放时如何约束移动？

Posted 2023-05-08

【中文标题】使用 HTML5 原生拖放时如何约束移动？

【英文标题】：How to constrain movement when using HTML5 native drag and drop?

【发布时间】：2012-02-23 01:22:27

【问题描述】：

各种 javascript 库（例如 jQuery UI）提供拖放交互，您可以在其中 constrain the movement 将拖动的元素放到单个轴或特定区域内。

使用原生的html5 drag and drop API 可以实现这种事情吗？

【问题讨论】：

链接到 w3schools 应该被视为重罪。

HTML5: Drag/drop on X-axis and without fade?的可能重复

我知道这是一篇旧帖子...但我通过在dragstart 上创建一个克隆元素来解决这个问题，隐藏原始元素，然后使用dragover 事件设置克隆的位置 - 其中它可以被约束。与使用mousemove 没有太大区别。这比完全重写拖放要容易 - 我相信很多人都有。

嗨@mseifert 你有这个示例代码吗？我也在尝试移动仅粘在 x 轴或 y 轴上的拖动对象

@AgnesPalit 是的。您可以在github.com/mseifert9/Javascript-Slideshow 找到代码——它包含在幻灯片中。您可以在 dragdrop.js + draggable.js + droppable.js 中找到代码。幻灯片的完整演示可以在 design.mseifert.com/index.php?topid=1&grade=Slideshow

找到

【参考方案1】：

完全不同！ jQuery UI 拖放使元素在页面中移动（带有顶部和左侧 CSS 属性）。

原生 HTML5 拖放 API 只允许您移动可拖动元素的“幽灵”（当然，您可以在拖动幽灵的同时隐藏原始元素）。

API 带有a lot of event 但不，您不能限制鼠标位置，因此您不能限制到单轴（导致幽灵跟随鼠标位置，即使鼠标离开页面（但事件可能可能停止运行））。

【讨论】：

+1，我更新了从 W3Schools 到 MDN 的链接以避免这成为问题的主题。

我从未链接到 W3schools，那是编辑我问题的人。这个网站很烂。