Stacking an object while dragging it

Question

I just want to know how to change the style of the object we are dragging using the HTML5 drag and drop API. I searched the net but didn’t find anything! I saw this lesson, but he did not give me information about styling the object by dragging it.

Any solutions to this problem?

Also, is this possible?

Answer 1

Partially possible In HTML5, you cannot change the style of a ghost object, but you can change the default ghost object using setDragImage from a DataTransfer object. Made an example here (blu div will turn red div when dragging):

<style> #div1{ background-color:blue; width:100px; height:100px; } #div2{ background-color:red; width:100px; height:100px; } </style> ... <div id="div1" draggable="true" ></div> <br/> <div id="div2" ></div> <script> document.getElementById('div1').addEventListener('dragstart', function(event) { event.dataTransfer.setDragImage(document.getElementById('div2'),50,50); }); </script> 

http://jsfiddle.net/ftX3C/

Thus, you cannot change the style, but you have a hidden element from which you can use it as a ghost image. It can also be img or canvas.

I recommend the following html5 drag and drop guide: http://www.html5rocks.com/en/tutorials/dnd/basics/

also reads about the DataTransfer object after you finish this: developer.mozilla.org/en-US/docs/Web/API/DataTransfer