HTML5 Drag-and-Drop: How do I target the cloned AND original elements?
css, drag-and-drop, html
Solution
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.
Problem
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.