使用 HTML 拖动当尺寸很大时图像淡出答案

【问题标题】：image fading out when size is big using HTML drag使用 HTML 拖动当尺寸很大时图像淡出
【发布时间】：2021-02-23 13:27:57
【问题描述】：

我们正在使用 HTML 的拖放功能。

你可以看到 div 的宽度是410px，如果开始拖动这个 div，它的幻影图像会完全消失。我在拖动它们时要显示大/大图像，并且由于它们的尺寸很大，它们开始完全淡出。有什么问题吗？

如果我将 div 宽度更改为210px，那么重影图像看起来很好。那么410px有什么问题吗，有什么限制吗？如果是，我该如何增加它？

var els = document.getElementsByTagName('div');
for (var i = 0, l = els.length; i < l; i++) {
    els[i].addEventListener('dragstart', function (e) {
        e.dataTransfer.setData('text/plain', e.target.innerText);
    });
}

div {
    display: inline-block;
    line-height: 300px;
    text-align: center;
    background: orange;
    margin: 20px;
}

&lt;div draggable="true" style="width:410px"&gt;Item 2&lt;/div&gt;

【问题讨论】：

关于这个问题有一个similar post。它似乎只影响 Windows 10 和宽度大于 300 像素的元素。

标签： javascript html drag-and-drop draggable

【解决方案1】：

使用 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";
}

【讨论】：