HTML5在邊界內可拖動

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只..

來源

2013-02-19 allenhwkim

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

如果你試圖在窗口周圍移動div（就像對話框或窗口），我不認爲'可拖動'的東西是你想要的。 – NickSlash 2013-02-19 22:23:28

我同意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

HTML5的可拖動界面是從jQuery UI拖動很大的不同。目的不是讓您在沙箱中移動元素，而是讓您使用視覺反饋移動數據。

當您使用jQuery可拖動方式拖動某些東西時，它會影響屏幕上的視覺更改。它改變了一個元素的偏移量，使它出現在一個新的位置，並且有很多選項可以讓你控制它在哪裏以及如何移動。 HTML draggable屬性的存在使您可以更好地控制現有的拖放機制。例如，您可以突出顯示文字並將其拖動到任何可讓您輸入文字的位置，並且會複製文字。此外，您可以將圖像從瀏覽器拖出到文件夾中，然後它將複製圖像。

正如你不能限制用戶的鼠標移動，如果他們從瀏覽器屏幕拖動圖像到他們的桌面上，我不相信你有權力在用戶拖動使用html屬性的東西。相反，該機制可以讓您擴展可拖動和拖放文本和圖像的內容。在某些情況下，您可以完全禁用該機制，但它不允許對用戶決定對數據做什麼的細粒度控制。它是一種非常高級的機制，允許在完全不同的應用程序之間進行數據傳輸，並且給予你太多的權力以表明它的行爲可能會破壞它在不同情況下工作的能力。

來源

2013-02-19 22:33:46 Bubbles

HTML5在邊界內可拖動

回答

相關問題