2013-02-19 114 views
0

Html5元素具有一个新属性,可拖动,并像这样使用它。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只..

+0

你的意思是不使用jQuery或不使用jQueryUI或不使用JavaScript? – David 2013-02-19 21:49:19

+1

如果你试图在窗口周围移动div(就像对话框或窗口),我不认为'可拖动'的东西是你想要的。 – NickSlash 2013-02-19 22:23:28

+0

我同意NickSlash - 可能你不想使用'draggable'。 http://www.quirksmode.org/blog/archives/2009/09/the_html5_drag.html - html5可拖动对实现丰富的拖放界面没有用处。改为使用Javascript,但不需要jQuery - 还有很多其他库,或者您可以自己写。但是,如果您已经在使用jQuery,请使用它! – codefactor 2013-02-19 22:46:36

回答

5

HTML5的可拖动界面是从jQuery UI拖动很大的不同。目的不是让您在沙箱中移动元素,而是让您使用视觉反馈移动数据。

当您使用jQuery可拖动方式拖动某些东西时,它会影响屏幕上的视觉更改。它改变了一个元素的偏移量,使它出现在一个新的位置,并且有很多选项可以让你控制它在哪里以及如何移动。 HTML draggable属性的存在使您可以更好地控制现有的拖放机制。例如,您可以突出显示文字并将其拖动到任何可让您输入文字的位置,并且会复制文字。此外,您可以将图像从浏览器拖出到文件夹中,然后它将复制图像。

正如你不能限制用户的鼠标移动,如果他们从浏览器屏幕拖动图像到他们的桌面上,我不相信你有权力在用户拖动使用html属性的东西。相反,该机制可以让您扩展可拖动和拖放文本和图像的内容。在某些情况下,您可以完全禁用该机制,但它不允许对用户决定对数据做什么的细粒度控制。它是一种非常高级的机制,允许在完全不同的应用程序之间进行数据传输,并且给予你太多的权力以表明它的行为可能会破坏它在不同情况下工作的能力。