拖动元素会遮挡拖放目标

Question

我使用原生的HTML5拖放API来拖拽页面上的一些元素。我遇到的问题是，被拖动的元素相当大，它的当前位置遮挡了我的一些拖放目标。当我将拖动的元素设置为显示none、可见性隐藏或指针事件为none，甚至是position absolute和left -10000px时，会立即在该元素上触发dragend事件。

有没有办法克服它？

Answer 1

你有没有尝试创建一个临时元素来表现得像阴影一样？

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

请参阅http://jsfiddle.net/89gs21jj/1/