拖动元素遮盖放置目标答案

【问题标题】：Dragging element obscures drop target拖动元素遮盖放置目标
【发布时间】：2015-06-13 13:20:24
【问题描述】：

我正在使用原生 HTML5 拖放 API 在页面上拖动一些元素。我遇到的问题是拖动的元素相当大，并且它的当前位置掩盖了我的一些放置目标。当我将拖动的元素设置为不显示或隐藏可见性或将指针事件设置为无，甚至定位绝对和左 -10000px 时，dragend 事件会立即在该元素上触发。

有办法克服吗？

【问题讨论】：

您是否尝试过在拖动开始时缩小拖动的元素并在拖动结束时恢复其大小？
你能不能让它在拖动时变成半透明？
是的，但是原始元素保留在它的位置。

标签： javascript html drag-and-drop

【解决方案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/

【讨论】：