e.dataTransfer.setDragImage 完全不透明答案

【问题标题】：e.dataTransfer.setDragImage at full opacitye.dataTransfer.setDragImage 完全不透明
【发布时间】：2014-06-30 21:39:36
【问题描述】：

我正在使用 HTML5 拖放 API。我使用可见节点设置了拖动图像，但它是重影/部分透明的。

设置拖拽图片：

evt.dataTransfer.setDragImage(someVisibleElement, -12, -8);

我看到的每个例子都是半透明的：

http://www.kryogenix.org/code/browser/custom-drag-image.html

您似乎无法在此元素上设置不透明度，这是真的吗？ MDN docs 没有选项，但我希望有人能确认。如果我们可以设置图像，将我们锁定在 50% 的不透明度似乎很奇怪。

【问题讨论】：

20 天后才更新。我已经接受不可能改变不透明度。尽管如此，仍然对约束感到惊讶。

标签： html drag-and-drop

【解决方案1】：

我没有找到简单的方法

但你可以努力做到:-D。创建/克隆你想看到拖动的元素，追加到 dom，设置位置固定，在 dragstart 和 dragend 之间根据你的鼠标位置更新他的位置。

【讨论】：

没错，你绝对可以做到这一点。问题是浏览器锁定了它们提供的 dom 元素的不透明度。
哦，伙计，为什么他们没有适当地整合这个）：那不是超级密集吗？

【解决方案2】：

您不能在此元素上设置不透明度。希望能够指出规范或错误报告中指出这种情况的部分。

【讨论】：

【解决方案3】：

使用 event.dataTransfer.setDragImage(new Image(), 0, 0) 隐藏原始图像；在拖动启动。 onDrag 获取重影图像，使用 event.pageX、eventet.pageY 更新位置

onDrag(event){
    event.preventDefault();
    const parentElement = <HTMLDivElement>(document.querySelector('.darggable-ghost-wrapper'));
    parentElement.style.position = "fixed";
    parentElement.style.left = event.pageX  + "px";
    parentElement.style.top = event.pageY + 5 +  "px";
    parentElement.style.opacity = ArhitectUtlityConstants.GHOSTPREVIEW.ghostOpacity;
    parentElement.style.border = "1px solid green !important";
}

【讨论】：