Control HTML5 drag and drop effect

Question

Is there a way to control the look of “what you drag” using HTML5 drag and drop APIs?

Usually any HTML element is draggable, which becomes translucent and follows your cursor until you stop / fall. I would like to control this so that I can start dragging from anywhere inside the element, but when you actually start dragging, I can only have a small image, following the cursor exactly where the cursor is.

A practical example: a list of things to drag and drop, each of which is a small image and some text for the name of the thing that you will drag to the side. I would like to be able to start dragging anywhere in the element above the image or text, but then only the image follows your cursor and directly below the cursor, and not offset from where you dragged it.

I can come up with several ways to trick it (a hidden element that appears where you hover when you start to drag, and that’s what you actually drag), or resort to the classic Javascript drag and drop.

thank

Answer 1

I think .setDragImage(element, x, y); may 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 support consistent native browser customization behavior.

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

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

Long and short, however, is that using a helper (like the jQuery user interface) or folding your own is usually preferable if you need to do something complicated.

However, if you really want to use your own behavior, and setDragImage () is not suitable, there are several alternatives.

One particularly extravagant approach may involve capturing a renderer to create a screenshot (!) Of an element in its own style, and then insert it through a data URI.

See: http://cburgmer.imtqy.com/rasterizeHTML.js/jsconfeu2013/#/step-4

A prudent approach would be to absolutely absolutely position the ghost element to follow the mouse. But that brings us back to writing code that reimplementes the core parts of drag and drop behavior outside the API.

Answer 3

Check out this part of the jQuery user interface. This makes it easy to create the ghost of a dragged item while the original remains at its original location. You can also specify a custom "helper" to follow the cursor.

Answer 4

According to this question in StackOverflow we cannot change the style of the dragged object when dragging it, but we can set the image of the drag and drop. This will cause the image to appear when you drag a ghost object.

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

Explanation:

on dataTransfer we call the setDragImage() function, in which we pass the div identifier and indicate the position where the image will be displayed when we start dragging it.

Read more about dataTransfer here: Mozilla Developers - DataTransfer