javascript - HTML5 可在边界内拖动

Question

Html5元素有一个新的属性，draggable，这样使用。

http://www.w3.org/TR/2011/WD-html5-20110405/dnd.html

 <div draggable="true">foo</div>

它也接受一个带有鼠标事件参数的 ondrag 事件。

 <div draggable="true" ondrag="drag(event)">foo</div>

我的问题是；有没有办法设置拖动边界，这样我就只能水平拖动，就像在 JQuery 中一样，http://jqueryui.com/draggable/#constrain-movement .

不使用 JQuery.. 仅使用 Javascript..

Answer 1

HTML5 可拖动界面与 jQuery UI 可拖动界面有很大不同。它的目的不是让您在沙盒中四处移动元素，而是让您通过视觉反馈四处移动数据。

当您使用 jQuery draggable 拖动某些东西时，它会影响屏幕上的视觉变化。它会更改元素的偏移量，使其出现在新位置，并且有许多选项可让您控制元素移动的位置和方式。 html 可拖动属性的存在是为了让您对现有的拖放机制有更多的控制。例如，您可以突出显示文本并将其拖动到任何允许您输入文本的地方，它会复制文本。此外，您可以将图像从浏览器拖到文件夹中，它会复制图像。

正如如果用户将图像从浏览器屏幕拖到他们的桌面上时您无法限制用户的鼠标移动一样，我认为您对用户使用 html 属性将某些内容拖到何处没有任何权力。相反，该机制允许您扩展可以拖放的内容，而不仅仅是文本和图像。在某些情况下，您可以完全禁用该机制，但它不允许对用户决定对数据执行的操作进行细粒度控制。它是一种非常高级的机制，允许在完全不同的应用程序之间传输数据，并且赋予您过多的权力来控制它的行为方式可能会破坏它在不同情况下的工作能力。