Javascript html5可拖动隐藏原始元素

当开始使用HTML5的draggable属性拖动一个元素时，原始元素仍然可见，所以我最后看到的是两个元素，而不是一个

我如何才能使被拖动的元素只可见（原始元素应该暂时隐藏）

函数startDrag（）{
//隐藏初始元素
}
函数endDrag（）{
//重置初始元素
}

---

这里有一个jsfiddle来说明这个问题

您可以通过一个黑客解决方案成功解决这个问题。本机draggability不允许CSS样式，例如：

opacity:0，
可见性：隐藏
或
显示：无

但是您可以使用：
transform:translateX（-9999px）
来完成


功能启动图（e）{
设元素=e.target；
元素.classList.add（'hide'）；
}
函数endDrag（e）{
设元素=e.src元素；
element.classList.remove（'hide'）；
}
.draggable{
边界半径：4px；
背景：#CC0000；
宽度：40px；
高度：40px；
}
.隐藏{
过渡：0.01s；
转换：translateX（-9999px）；
}
由于简单地设置
可见性：隐藏
不起作用，我找到了另一个有点老套的解决方案：在拖动事件开始一毫秒后设置
可见性：隐藏


功能启动图（e）{
setTimeout（函数（）{
e、 target.style.visibility=“hidden”；
}, 1);
}
函数endDrag（e）{
setTimeout（函数（）{
e、 target.style.visibility=“”；
}, 1);
}
正文{
显示：内联块；
外形：1px纯黑；
}
.拖拉{
边界半径：4px；
背景：#CC0000；
宽度：40px；
高度：40px；
}

找到了以下内容：

使用干净的解决方案将源/原始元素隐藏在dragover处理程序中

var拖动；
函数dragstart（e）{
拖动=$（此项）；
}
函数dragover（e）{
拖动。隐藏（）；
}
函数dragend（e）{
如果（拖动）{
拖动.show（）；
拖动=未定义；
}
}
这一点可以在没有前面答案中的恶作剧的情况下实现

关键是要监听
拖动
事件，而不是
拖动启动


//侦听拖动事件，而不是dragstart！
document.querySelector（“.draggable”）.addEventListener（“拖动”，（e）=>{
e、 target.classList.add（“拖动”）；
});
document.querySelector（“.draggable”）.addEventListener（“dragend”，（e）=>{
e、 target.classList.remove（“拖动”）；
});
.draggable{
宽度：200px；
高度：30px；
背景色：#5856d6；
文本对齐：居中；
线高：30px；
}
.拖{
背景：透明；
颜色：透明；
边框：1px实心#5856d6；
}
拖我菲利佩的回答真的很有帮助。如果
setTimeout
或
requestAnimationFrame
不适合您。尝试添加转换

转换：转换0.01s；
转换：translateX（-9999px）；
您可以将以下代码添加到dragStart事件中：

event.dataTransfer.setDragImage(new Image(), 0, 0); // Hide the dragged element

它会隐藏你的目标拖拽元素。
哇，太好了，你知道如何将拖拽元素的不透明度设置为1吗？哈哈，谢谢。我找不到这样做的方法，似乎拖动的“ghost元素”在DOM中不可用，所以我们得到了一些限制。看看这个@julesbou Filipe是否仍然没有合适的解决方案？为什么必须使用setTimeout？！单击元素后，浏览器将“复制”该元素，如果该元素被隐藏，浏览器将复制一个透明元素。超时允许浏览器复制并隐藏元素。您可以使用
window.requestAnimationFrame
，而不是使用
setTimeout来执行此操作：
function startDrag（e）{window.requestAnimationFrame（function（）{e.target.style.visibility=“hidden”；}
@andrewheedge知道如何防止不透明度降低吗@Anthony你有没有找到一个模仿旧方法拖放的解决方案（没有原始元素可见，拖放副本中没有不透明）？@Rantiev是的，你基本上必须从头开始创建自己的拖放功能，并实际移动用户正在移动的元素，这并不像看起来那么困难。使用
mousedown
，
mouseup
，
mousemove
，
clientX
，
clientY
，etc@anthony所以，这意味着我们不能模仿，我们只能用老办法？我已经有了。。。只是FF出现了一些奇怪的问题，我必须附加dragstart listener并在其中调用e.preventDefault（），以防止拖拽阻塞。这就是为什么我开始探索新的方式（它的创造者需要永远在地狱里燃烧）
event.dataTransfer.setDragImage(new Image(), 0, 0); // Hide the dragged element