[英]Style drag ghost element
我正面臨一個問題,我正在拖動一個 div。
雖然幽靈元素在 MacO 上看起來不錯(在 Chrome 和 FireFox 上都是如此),但它似乎太透明了,在 Windows 中(在 Chrome 和 FireFox 上都是如此。我嘗試了多種方法,但似乎沒有任何效果。所以可以設置樣式鬼元素?
此外,我嘗試在 go 上制作該元素的圖像,並將其用作重影拖動圖像,但透明度問題仍然存在。
您可以通過在 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>
正如其他人所說,重影是基於瀏覽器的並且無法更改,因此如果您想解決這個問題,您似乎需要自己的解決方案。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.