使用 HTML 拖动尺寸较大时图像淡出

问题描述

我们正在使用 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;
}

<div draggable="true" style="width:410px">Item 2</div>

解决方法

使用 event.dataTransfer.setDragImage(new Image(),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";
}

drag-and-drop html javascript