Html5元素有一个新属性,可拖动,并像这样使用它.
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属性拖动某些内容的地方有任何影响力.相反,该机制允许您扩展可以拖放到文本和图像之外的内容.在某些情况下,您可以完全禁用该机制,但它不允许对用户决定对数据执行的操作进行细粒度控制.它是一种非常高级的机制,允许在完全不同的应用程序之间进行数据传输,并且对于它的行为方式给予你太多的权力可能会破坏它在不同情况下工作的能力.