Question

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

设置拖动图像：

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

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

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

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

Answer 1

我没有找到简单的方法

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

Answer 2

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

Answer 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";
}

完全不透明度的e.dataTransfer.setDragImage

3 个答案: