Controlling the appearance of the HTML5 drag and drop effect

Question

Is there a way to control the appearance of "what you are dragging" using the HTML5 Drag and Drop APIs?

Normally, whatever HTML element is draggable is what becomes semi-transparent and follows your cursor until you stop/drop. I'd like to control that so that I can start my drag from anywhere inside an element, but when you actually start dragging, I can have only a small image follow the cursor, exactly where the cursor is.

The practical example is: A list of things to drag, each is a small image and some text for the name of the thing you will be dragging to side of it. I'd like to be able to start my drag anywhere in the element over the image or text, but then only the image follows your cursor, and directly under the cursor, rather than offset from where you started dragging it.

I can think of a few ways to trick it (a hidden element that appears where you mouse cursor is, when you start to drag and is what you actually drag), or resort to classic Javascript drag and drop.

Thanks

Answer 1

I think .setDragImage(element, x, y); might be what you are looking for.

function handleDragStart(e) {
    var dragIcon = document.createElement('img');
    dragIcon.src = 'http://...';
    dragIcon.width = 100;
    e.dataTransfer.setDragImage(dragIcon, x, y);
}

this.addEventListener('dragstart', handleDragStart, false);

Example here: jsfiddle.net/cnAHv/

Answer 2

Unfortunately, it looks like the spec was built to favor consistent native behavior over in-browser customization.

We did a bunch of research and summarized our findings here:

https://www.inkling.com/engineering/native-html5-drag-drop/

The long and short, though, is that using a helper (like jQuery UI) or rolling your own is generally preferable if you need to do anything sophisticated.

Still, if you'd really like to use the native behavior and setDragImage() isn't adequate, there are a few alternatives.

One particularly extravagant approach could involve hijacking the renderer to create a screenshot (!) of the element as you‘d like it to be styled, and then inserting it via a data URI.

See: http://cburgmer.github.io/rasterizeHTML.js/jsconfeu2013/#/step-4

A saner approach would be to simply absolutely position a ghost element to follow the mouse. But that takes us back to writing code that re-implements core parts of drag behavior outside of the API.

Answer 3

According to this question on StackOverflow, we cannot change the style of the draggable object while dragging it but we can set a drag image. This will cause a image to appear while dragging the ghost object.

event.dataTransfer.setDragImage(document.getElementById('div2'),50,50);

Explanation:

on dataTransfer we call a setDragImage() function in which we pass the ID of the div and give the position of where the image will appear when we will start dragging it.

See more about dataTransfer here: Mozilla Developers - DataTransfer