StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHTML5 Drag and Drop events and setDragImage browser support
text
Body
copied!<p>I'm working on a <a href="https://github.com/GeReV/html5dragdrop" rel="noreferrer">small jQuery plugin</a> that mimics the jQuery UI draggable/droppable behavior with native HTML5 drag and drop events.</p> <p>A feature I'd want to add is the ability to specify the node which will serve as the drag proxy.</p> <p>I did a bit of research, and <a href="https://developer.mozilla.org/en-US/docs/DragDrop/DataTransfer#setDragImage%28%29" rel="noreferrer">according to MDN</a>, to do this requires the use of <code>setDragImage()</code>, passing an image or an element.<br> What is the support for <code>setDragImage</code> in different browsers?</p> <p>I've noticed there's a plugin named <a href="http://threedubmedia.com/code/event/drag" rel="noreferrer">jquery.event.drag</a> which takes a different than I expected to this problem.<br> Would this feature require me to make some kind of workaround like the above plugin, or should this be possible out-of-the-box in most or all browsers using <code>setDragImage</code>?</p> <p><strong><em>EDIT</em></strong></p> <p>After playing around a bit with this functionality, it would seem that this function is quite limited.</p> <p>Besides having no support in quite a few browsers, using an arbitrary DOM element as the helper requires it to be <em>in the DOM tree and visible</em>, and so you have the element itself on the body, and a copy of it as the handler. This is mostly unwanted for this sort of plugin.</p> <p>Further more, rendering is also problematic even when the right terms are met. When trying to create a helper from <code><span>TEST</span></code>, the helper itself only showed a white rectangle with the dimensions of the <code>span</code>.</p> <p>Are these issues that were to be expected according to the specs? Could they be fixed in code or would they require a workaround?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload