Dragging element obscures drop target

Question

I'm using native HTML5 drag and drop API do drag some elements on the page. The problem i'm having is that the dragged element is rather large and it's current position obscures some of my drop targets. When i set the dragged element to display none or visibility hidden or pointer events to none, or even position absolute and left -10000px the dragend event is immediately triggered on that element.

Is there a way to overcome it?

Answer 1

Did you try to create a temporary element to behave like shadow?

function drag(ev) {
    var shadow = createShadowElement();
    var element = document.getElementById(ev.target.id);
    element.appendChild(shadow);

    ev.dataTransfer.setDragImage(shadow, 0, 0);
    ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
    ev.preventDefault();
    var data = ev.dataTransfer.getData("text");
    var element = document.getElementById(data);
    ev.target.appendChild(element);
}

function dragEnd(ev) {
    removeShadowElement();    
}

See at http://jsfiddle.net/89gs21jj/1/