Html5 element has a new attribute, draggable, and used it like this.

.html

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

it also accept an event ondrag with argument a mouse event.

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

My question is; Is there a way to set a drag boundaries, so that I can drag horizontally only , like in JQuery, .

Without using JQuery.. with Javascript only..

Html5 element has a new attribute, draggable, and used it like this.

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

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

it also accept an event ondrag with argument a mouse event.

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

My question is; Is there a way to set a drag boundaries, so that I can drag horizontally only , like in JQuery, http://jqueryui./draggable/#constrain-movement.

Without using JQuery.. with Javascript only..

• javascript
• html

• You mean without using jQuery or without using jQueryUI or without using javascript? – David Hellsing Commented Feb 19, 2013 at 21:49
• 2 If your trying to move the div around the window (like a dialog or window) I dont think the draggable stuff is what you want. – NickSlash Commented Feb 19, 2013 at 22:23
• I agree with NickSlash - probably you do not want to use draggable. quirksmode/blog/archives/2009/09/the_html5_drag.html - html5 draggable is not useful to implement rich drag and drop interfaces. Use Javascript instead, but you don't need jQuery - there are many other libraries, or you could just write your own. But if you're already using jQuery, then use it! – codefactor Commented Feb 19, 2013 at 22:46

1 Answer 1

The HTML5 draggable interface is quite different from the jQuery UI draggable. It's purpose is not to allow you to move elements around in a sandbox, but rather to let you move data around with visual feedback.

When you drag something around using jQuery draggable, it is to affect a visual change on the screen. It changes the offsets of an element so it appears in a new location, and there are many options that allow you to control where and how it moves. The html draggable property exists to give you a degree more control over existing drag and drop mechanisms. For example, you can highlight and drag text to anything that lets you enter text, and it will copy the text. Also, you can drag an image off of a browser into a folder, and it will copy the image.

Just as you cannot restrict a user's mouse movement if they drag an image off of a browser screen onto their desktop, I do not believe you have any power over where a user drags something using the html property. Rather, the mechanism lets you expand what can be dragged and dropped beyond text and images. You can disable the mechanism entirely in some cases, but it does not allow fine grained control of what the user decides to do with the data. It is a very high-level mechanism that allows data transfer between pletely different applications, and giving you too much power over how it behaves would likely ruin its ability to work across different situations as well as it does.