风格拖鬼元素

Question

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

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

此外，我尝试在 go 上制作该元素的图像，并将其用作重影拖动图像，但透明度问题仍然存在。

Answer 1

您可以通过在 JavaScript 中自己实现元素的拖动来做到这一点。 这样，您可以在拖动元素时将 CSS class 应用到该元素，其中 styles 以任何您希望的方式。

 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) { e = e || window.event; e.preventDefault(); cOffX = e.clientX - el.offsetLeft; cOffY = e.clientY - el.offsetTop; document.addEventListener('mousemove', dragMove); document.addEventListener('mouseup', dragEnd); el.classList.add(d); container.style.cursor = 'move'; }; function dragMove(e) { e = e || window.event; e.preventDefault(); el.style.top = (e.clientY - cOffY).toString() + 'px'; el.style.left = (e.clientX - cOffX).toString() + 'px'; }; function dragEnd(e) { e = e || window.event; e.preventDefault(); document.removeEventListener('mousemove', dragMove); document.removeEventListener('mouseup', dragEnd); el.classList.remove(d); container.style.cursor = null; };

 #container { width: 100vw; height: 100vh; margin: 0; padding: 0; } #drag { position: absolute; height: 100px; width: 100px; background-color: lime; border-radius: 0; transition: background-color 0.25s, border-radius 0.25s; cursor: move; } #drag.dragging { background-color: navy; border-radius: 50%; }

 <div id="container"> <div id="drag"></div> </div>

正如其他人所说，重影是基于浏览器的并且无法更改，因此如果您想解决这个问题，您似乎需要自己的解决方案。