使用HTML拖拽，当尺寸较大时图像淡出

Question

我们正在使用&HTML的drop特性。

你可以看到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>

Answer 1

使用event. datattransfer隐藏原始图像。setDragImage(new Image()， 0,0);dragstart。onDrag获取幽灵图像，使用事件更新位置。pageX, evenet.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";
}