样式拖鬼元素

Question

我正面临一个问题，我正在拖动一个 div。

虽然幽灵元素在 MacOs 上看起来不错（在 Chrome 和 FireFox 上都是这样），但在 Windows 中似乎太透明了（在 Chrome 和 FireFox 上都是。我尝试了多种方法，但似乎没有任何效果。所以是否可以设置样式鬼元素？

此外，我尝试在旅途中制作该元素的图像，并将其用作幽灵拖动图像，但透明度问题仍然存在。

Answer 1

您可以通过在 JavaScript 中自己实现元素的拖动来做到这一点。这样，您可以在拖动元素时将 CSS 类应用于元素，以您希望的任何方式对其进行样式设置。const d = 'dragging';const container = document.getElementById('container');const el = document.getElementById('drag');var cOffX = 0;var cOffY = 0;el.addEventListener('mousedown', dragStart);function dragStart(e) {&nbsp; e = e || window.event;&nbsp; e.preventDefault();&nbsp; cOffX = e.clientX - el.offsetLeft;&nbsp; cOffY = e.clientY - el.offsetTop;&nbsp; document.addEventListener('mousemove', dragMove);&nbsp; document.addEventListener('mouseup', dragEnd);&nbsp; el.classList.add(d);&nbsp; container.style.cursor = 'move';};function dragMove(e) {&nbsp; e = e || window.event;&nbsp; e.preventDefault();&nbsp; el.style.top = (e.clientY - cOffY).toString() + 'px';&nbsp; el.style.left = (e.clientX - cOffX).toString() + 'px';};function dragEnd(e) {&nbsp; e = e || window.event;&nbsp; e.preventDefault();&nbsp;&nbsp;&nbsp; document.removeEventListener('mousemove', dragMove);&nbsp; document.removeEventListener('mouseup', dragEnd);&nbsp; el.classList.remove(d);&nbsp; container.style.cursor = null;};#container {&nbsp; width: 100vw;&nbsp; height: 100vh;&nbsp; margin: 0;&nbsp; padding: 0;}#drag {&nbsp; position: absolute;&nbsp; height: 100px;&nbsp; width: 100px;&nbsp; background-color: lime;&nbsp; border-radius: 0;&nbsp; transition: background-color 0.25s, border-radius 0.25s;&nbsp; cursor: move;}#drag.dragging {&nbsp; background-color: navy;&nbsp; border-radius: 50%;}<div id="container">&nbsp; <div id="drag"></div></div>正如其他人所说，重影是基于浏览器的，无法更改，因此如果您想解决这个问题，似乎您需要自己的解决方案。