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..
HTML5 的可拖动界面与 jQuery UI 的可拖动界面有很大的不同。它的目的不是让您在沙箱中移动元素，而是让您通过视觉反馈移动数据。
当您使用 jQuery draggable 拖动某些东西时，它会影响屏幕上的视觉变化。它会更改元素的偏移量，使其出现在新位置，并且有许多选项可让您控制其移动的位置和方式。html draggable 属性的存在是为了让您对现有的拖放机制有更多的控制。例如，您可以突出显示文本并将其拖动到任何可让您输入文本的地方，它会复制文本。此外，您可以将图像从浏览器拖到文件夹中，它会复制图像。
就像如果用户将图像从浏览器屏幕拖到桌面上，您无法限制用户的鼠标移动一样，我不相信您对用户使用 html 属性将某些内容拖到哪里有任何权力。相反，该机制允许您扩展可以拖放的内容，超出文本和图像。在某些情况下，您可以完全禁用该机制，但它不允许对用户决定如何处理数据进行细粒度控制。这是一种非常高级的机制，它允许在完全不同的应用程序之间传输数据，并且给你太多的权力来控制它的行为可能会破坏它在不同情况下工作的能力。