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

【问题标题】：How to constrain movement when using HTML5 native drag and drop?使用 HTML5 原生拖放时如何约束移动？
【发布时间】：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 但不，您不能限制鼠标位置，因此您不能限制到单轴（导致幽灵跟随鼠标位置，即使鼠标离开页面（但事件可能可能停止运行））。

【讨论】：