How to drag any element

This is where the HTML5 spec added some new content to the API. Enabling any element to be dragged is incredibly easy. Take your div and add the new attribute: draggable. For example:

<div draggable="true">This element be draggable</div>

Of course I said incredibly easy. Well, it works in Firefox; any element that has the draggable attribute can now be dragged around the browser. Of course, since it’s a new addition in HTML5, it doesn’t come as standard in IE, so forget about it working there. Perhaps it will work in IE9 or later. More incredible is getting it to work in Safari 4.

Although it’s blindingly simple to enable any element to be draggable using the draggable attribute, for reasons that are still beyond this author and many other bloggers, to get any element to drag in Safari 4 you need to give it a specific CSS style. That’s right, to enable a behaviour you need to define a presentational attribute. This has been fixed in Safari 5 so the CSS isn’t required, but for older Safari versions you’ll need the following CSS to target elements with the draggable attribute: