Javascript 在HTML5拖放中更改重影图像

这里我有一些大的div，但它对我来说太大了，我想改变它。以下是我的解决方案：

<div draggable = "true" id = "ololo">
</div>
var k = document.getElementById("ololo");
k.addEventListener("dragstart", _drag, false);

function _drag(evt){
    var cl =  this.cloneNode(true);
    cl.style.backgroundColor = "blue";
    cl.style.width = "10px";
    cl.style.height = "10px";
    cl.style.position = "absolute";
    cl.style.left = "1000px";
    cl.style.overflow = "hidden";

    document.getElementsByTagName("body")[0].appendChild(cl);
    evt.dataTransfer.setDragImage(cl, 0, 0);

    window.setTimeout(function() {
       cl.parentNode.removeChild(cl);
    }, 1000);

}

var k=document.getElementById（“ololo”）；
k、 addEventListener（“dragstart”，_drag，false）；
功能拖动（evt）{
var cl=此.cloneNode（真）；
cl.style.backgroundColor=“蓝色”；
cl.style.width=“10px”；
cl.style.height=“10px”；
cl.style.position=“绝对”；
cl.style.left=“1000px”；
cl.style.overflow=“隐藏”；
document.getElementsByTagName（“正文”）[0].appendChild（cl）；
evt.dataTransfer.SetDragage（cl，0，0）；
setTimeout（函数（）{
cl.parentNode.removeChild（cl）；
}, 1000);
}

---

它工作得很好，但在生产中使用它好吗？为什么会有一个滚动条，即使我在它溢出时隐藏了它？

如何使用

z-index

将克隆隐藏在原始可拖动文件后面，然后合并

setTimeout（）

方法以稍后删除它；防止DOM中不必要的重复。

这是在中找到的分步指南的改进版本

JS、CSS、HTML

document.getElementById（“drag coveredup”）.addEventListener（“dragstart”，函数（e）{
var crt=this.cloneNode（true）；
crt.style.backgroundColor=“红色”；
crt.style.height=“10px”；
crt.style.width=“10px”；
crt.style.position=“绝对”；
crt.style.top=“0”；
crt.style.left=“0”；
crt.style.zIndex=“-1”；
document.getElementById（“drag coveredup”）.appendChild（crt）；
e、 dataTransfer.SetDragage（crt，0，0）；
setTimeout（函数（）{
crt.parentNode.removeChild（crt）；
}, 1000);
}，假）
.dragdemo{
宽度：170px；
高度：100px；
位置：相对位置；
线高：100px；
文本对齐：居中；
背景：绿色；
颜色：#efe；
}
如何使用
z-index
将克隆隐藏在原始可拖动设备后面，然后合并
setTimeout（）
方法以稍后将其删除；防止DOM中不必要的重复。

这是在中找到的分步指南的改进版本

JS、CSS、HTML
document.getElementById（“drag coveredup”）.addEventListener（“dragstart”，函数（e）{
var crt=this.cloneNode（true）；
crt.style.backgroundColor=“红色”；
crt.style.height=“10px”；
crt.style.width=“10px”；
crt.style.position=“绝对”；
crt.style.top=“0”；
crt.style.left=“0”；
crt.style.zIndex=“-1”；
document.getElementById（“drag coveredup”）.appendChild（crt）；
e、 dataTransfer.SetDragage（crt，0，0）；
setTimeout（函数（）{
crt.parentNode.removeChild（crt）；
}, 1000);
}，假）
.dragdemo{
宽度：170px；
高度：100px；
位置：相对位置；
线高：100px；
文本对齐：居中；
背景：绿色；
颜色：#efe；
}
滚动条可能是因为“cl.style.left=“1000px””：D、 我知道，但我认为如果溢出的部分将被样式化为“隐藏”，这不会发生，我错了吗？一个具有可见性的元素：隐藏仍然在视图中“占据空间”，它只是没有显示。它不同于显示：无；这里有更好的解释：@old_school-这里有一个@ChrisBenseler问题是幽灵div将不可见，在这种情况下，滚动条可能是因为'cl.style.left=“1000px'：D、 我知道，但我认为如果溢出的部分将被样式化为“隐藏”，这不会发生，我错了吗？一个具有可见性的元素：隐藏仍然在视图中“占据空间”，它只是没有显示。它不同于显示：无；这里有更好的解释：@old_school-这里有一个@ChrisBenseler问题是ghost div将是不可见的，在这种情况下，它在Chrome和Safari中运行良好（请参阅以获得更准确的定位版本），但在Firefox中失败。这在Chrome和Safari中运行良好（请参阅以获得更准确的定位版本），但在Firefox中失败。