HTML5 Drag-and-Drop: How do I target the cloned AND original elements?

Question

I want to apply a class name to the "ghost" element being dragged, not the original element that was cloned. Here is the function I have in place for the dragstart event:

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;
}

The $(event.currentTarget).addClass('dragging'); line adds the .dragging class to the original element but not the cloned, dragging element.

How do I properly target both?

EDIT

Looking to handle this with native HTML5 as much as possible. Prefer not to use a jQuery plugin.

Answer 1

Add the class on the original element, then remove it after dragging starts (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 2

I am not an avid JavaScript scripter, but i stumbled upon this page while trying to find something for you, it might be what you need, specifically the proxy drag 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 3

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

So, you could take your currently dragging element (this in the event context usually), clone it, add it to the dom (ensuring it is "visible", aka not display: none or visibility:hidden) and you could then apply a class to it so you can target the dragged item itself in css. Then, add that element as the first argument to e.dataTransfer.setDragImage() and the browser will use that instead.

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

Here's a fiddle to see it in action: http://jsfiddle.net/6TDvz/

Answer 4

From this line of code:

event.originalEvent

seems that you are using jquery? So just consider that jquery make things much easier and is cross browser compatible.

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

with no 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);
}

With 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 will suggest using jquery ui for draging. With it you can personalize the drag helper as you need.