HTML5 drag and copy?

Question

I\'ve seen some working code for HTML5 drag and drop but has anyone an example of a drag and copy? I want to drag an element onto a drop element but only copy the element to

Answer 1

If you wanted an example using JQuery I have provided this jsFiddle. Essentially you just need to bind to the drop, dragover and dropstart events for the DOM objects. You can then use JQuery's build in clone() method to duplicate the element.

JQuery also returns it's own events wrapper so you must get the originalevent from the JQuery event

$('#x').bind('dragstart', function(e) {
    e.originalEvent.dataTransfer.effectAllowed = 'copy';
    e.originalEvent.dataTransfer.setData('Text', '#x');
});

$('#drop-box').bind('drop', function(e) {
    e.preventDefault();
    e.stopPropagation();

    $(this).html($(e.originalEvent.dataTransfer.getData('Text')).clone());

    return false;
}).bind('dragover', false);