HTML5 Drag-and-Drop: How to target cloned and original elements?

Question

I want to apply the class name to the ghost item being moved, and not to the original element that was cloned. Here is the function that I have for the dragstart :

 function dragStart(event) { event.originalEvent.dataTransfer.effectAllowed = 'move'; event.originalEvent.dataTransfer.setData("text/plain", event.target.getAttribute('id')); console.log(event); console.log('Dragging...'); $(event.currentTarget).addClass('dragging'); return true; } 

String $(event.currentTarget).addClass('dragging'); adds the .dragging class to the source element, but not to the cloned drag element.

How do I target both?

EDIT

Think about how to handle this with your native HTML5 as much as possible. It is not recommended to use the jQuery plugin.

Answer 1

I am not a greedy JavaScript script, but I came across this page trying to find something for you, it may be what you need, in particular, the proxy version:

http://threedubmedia.com/demo/drag/

 $('#demo6_box') .bind('dragstart',function( event ){ if ( !$(event.target).is('.handle') ) return false; return $( this ).css('opacity',.5) .clone().addClass('active') .insertAfter( this ); }) .bind('drag',function( event ){ $( event.dragProxy ).css({ top: event.offsetY, left: event.offsetX }); }) .bind('dragend',function( event ){ $( event.dragProxy ).remove(); $( this ).animate({ top: event.offsetY, left: event.offsetX, opacity: 1 }) }); 

This is all jQuery.

Answer 2

Add the class to the source element, then delete it after the start of the drag ( demo ):

 function dragStart(event) { var el = $(this); event.originalEvent.dataTransfer.effectAllowed = 'move'; event.originalEvent.dataTransfer.setData("text/plain", event.target.getAttribute('id')); el.addClass('dragging'); setTimeout(function() { el.removeClass('dragging'); }, 0); } 

Answer 3

From this line of code:

 event.originalEvent 

It seems that you are using jquery? So just think that jquery is easy to use and compatible with your browser.

HTML5 native and jquery method (using only javascript) implementing drag are almost the same. HTML5 only added drag and drop events, but no more to drag and drop methods:

without jquery:

 function dragStart(event) { event.originalEvent.dataTransfer.effectAllowed = 'move'; event.originalEvent.dataTransfer.setData("text/plain", event.target);//JUST ELEMENT references is ok here NO ID console.log(event); console.log('Dragging...'); var clone = event.target.cloneNode(true); event.target.parentNode.appendChild(clone); event.target.ghostDragger = clone;//SET A REFERENCE TO THE HELPER $(clone).addClass('dragging');//NOW YOU HAVE A CLONE ELEMENT JUST USE this and remove on drag stop return true; } function dragging(event){ var clone = event.target.ghostDragger; //here set clone LEFT and TOP from event mouse moves } //ON STOP REMOVE HELPER ELEMENT function stopDrag(event){ var clone = event.target.ghostDragger; clone.parentNode.removeChild(clone); } 

Using jquery:

 $( "#draggable" ).draggable({ helper: "clone", //EVEN here you can set the helper you want by defining a funcition start:function(event, ui){ ui.helper.addClass('yourclass'); } }); 

Althoug I suggest using jquery ui for decoration. With it, you can personalize the drag and drop helper as needed.

Answer 4

I know this question is old, but what you need to do is create / use a visible element (or image / canvas, etc.) for https://developer.mozilla.org/en-US/docs/Web/ API / DataTransfer # setDragImage.28.29

So you can take your current drag and drop element ( this in the context context usually), clone it, add it to dom (so that it is “visible”, otherwise display: none or visibility:hidden ) and you can apply a class to it so that you could target the drag and drop element in css. Then add this element as the first argument to e.dataTransfer.setDragImage() , and the browser will use it instead.

Remember to remove it later ( dragend ) or hide it in some way.

Here is the fiddle to see this in action: http://jsfiddle.net/6TDvz/

Answer 5

Maybe something is missing for me, but the following works for me, giving both the original and the dragged text a yellow background (by setting the class). Perhaps there is something in your specific situation that gives you a "ghost." Or maybe this has something to do with the little jQuery you're already using. All I can say is that when I try to recreate your problem, my simple test case really works fine.

 <!DOCTYPE html> <html> <head> <title>Drag Test</title> <script> function startDrag(event) { var orig = document.getElementById('original'); var dt = event.dataTransfer; orig.className += 'dragging'; dt.effectAllowed = 'move'; dt.setData('text/plain', 'This text may be dragged'); } </script> <style> .dragging { background-color: yellow; } </style> </head> <body> <div id="original" draggable="true" ondragstart="startDrag(event);"> This text may be dragged. </div> </body> </html> 

Answer 6

You said:

I want to apply the class name to the ghost element that is being dragged, not the original element that was cloned

Well, with normal drag and drop, there is no original vs-cloned element, there is only an element that is being dragged. Without seeing the rest of the drag and drop implementation, there is no way to give you an answer. We do not know what is called an "event." If your dragStart event is an HTML5 ondragstart event , then this article can help you. But if this is a custom event created by jQuery or some other environment, then no one can explain to you how to get the source or cloned element if you do not share the rest of your code.

If you do not want to rely on jQuery, you will have to write all the drag and drop functions from scratch. Here are some guides on how to do this:

JavaScript drag and drop tutorial

Drag and Drop Sort Lists and JavaScript

HTML5 Drag and Drop

If I could make a suggestion, this would insert w / jQuery. Creating a cross-browser compatible drag and drop system from scratch will take a lot of time. If you share the rest of your code, I can try to help you with a more specific answer.