我有一個包含幾個元素的元素，我希望在單擊元素的綠色標題時，它會隨著滑鼠的移動而被拖動，并且它會停留在最后一個位置（它是 Windows 視窗的模擬）。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
}
.container {
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.box {
position: absolute;
background-color: #000;
width: 475px;
height: 350px;
border: solid 1px rgb(0, 255, 0);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
#header {
position: absolute;
height: 20px;
width: calc(100% 2px);
transform: translateX(-1px);
top: -20px;
background-color: rgb(0, 255, 0);
}
.back-chiffre {
background: #000 url(/De4G.gif);
margin-top: 200px;
margin-right: 100px;
} <div class="container">
<div id="element" class="box back-chiffre">
<span id="header">
<span class="right">
<i class="fa-solid fa-window-minimize"></i>
<i class="fa-solid fa-window-restore"></i>
<i class="fa-solid fa-xmark"></i>
</span>
</span>
</div>
</div>uj5u.com熱心網友回復：
您首先要做的是在綠色標題上檢測mousedown并將坐標保存在變數中。一旦檢測到mousemove并且 downCoords 不為空，您可以根據移動的滑鼠位置更改 .style.left 和 .style.top 。最后，當您取消單擊 ( mouseup ) 時，它應該將坐標設定為 null 以便元素停止移動。
window.addEventListener("DOMContentLoaded", init);
let divElement, spnHeader;
let downCoords = null;
function init() {
divElement = document.getElementById("element");
spnHeader = document.getElementById("header");
let r = divElement.getBoundingClientRect();
spnHeader.addEventListener("mousedown", (e) => {
r = divElement.getBoundingClientRect();
if (e.button === 0) downCoords = [e.clientX, e.clientY];
});
window.addEventListener("mousemove", (e) => {
if (downCoords !== null) {
const [movedX, movedY] = [e.clientX - downCoords[0], e.clientY - downCoords[1]];
divElement.style.left = (movedX r.x) "px";
divElement.style.top = (movedY r.y - 200) "px"; // -200 due to CSS margin
}
});
window.addEventListener("mouseup", () => downCoords = null);
}* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
}
.container {
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.box {
position: absolute;
background-color: #000;
width: 475px;
height: 350px;
border: solid 1px rgb(0, 255, 0);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
#header {
position: absolute;
height: 20px;
width: calc(100% 2px);
transform: translateX(-1px);
top: -20px;
background-color: rgb(0, 255, 0);
}
.back-chiffre {
background: #000 url(/De4G.gif);
margin-top: 200px;
margin-right: 100px;
}<div class="container">
<div id="element" class="box back-chiffre">
<span id="header">
<span class="right">
<i class="fa-solid fa-window-minimize"></i>
<i class="fa-solid fa-window-restore"></i>
<i class="fa-solid fa-xmark"></i>
</span>
</span>
</div>
</div>uj5u.com熱心網友回復：
由于@User已經正確描述了它，我不會再描述了，我創建的可拖動視窗模擬有一個方便的功能，您可以輕松使用它而無需深入了解，或者如果您想知道您也可以通過代碼
function makeItMovable(){
let all = Array.from(arguments),
activeClass = "active_window"
all.forEach(el=>{
const header = el.querySelector("#header")
const rootEl = el.closest(".container")
let activeEl = null
el.addEventListener("mousedown",() => {
all.forEach(each=>each.classList.remove(activeClass))
el.classList.add(activeClass)
})
header.addEventListener("mousedown",(e)=>{activeEl = e})
document.addEventListener("mouseup",()=>{activeEl = null})
rootEl.addEventListener("mousemove",e=>{
if(activeEl){
const el = activeEl.target.closest(".box")
setPos(e.clientX,e.clientY,el)
}
})
function setPos(x,y,el){
x -= activeEl.layerX
y = activeEl.layerY
let newStyle = `left:${x}px !important; top:${y}px !important;`
el.setAttribute("style",newStyle)
}
})
}
// example use
window.onload = () => {
const boxes = document.querySelectorAll(".box")
makeItMovable(...boxes)
}@import url("./core-utils.css");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
overflow: hidden;
}
.container {
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.box {
position: absolute;
background-color: #000;
width: 475px;
height: 350px;
border: solid 1px rgb(0, 255, 0);
background-position: center;
background-size: contain;
background-repeat: no-repeat;
user-select: none !important;
}
.active_window #header {
background-color: rgb(0, 255, 0);
}
#header {
position: absolute;
height: 20px;
width: calc(100% 2px);
transform: translateX(-1px);
top: -20px;
background-color: rgb(122, 245, 122);
}
.back-chiffre {
background: #000 url(/De4G.gif);
/* margin-top: 200px;
margin-right: 100px; */
}
.active_window {
z-index: 999;
box-shadow: 3px 0px 10px 2px black;
}<div class="container">
<div class="box back-chiffre">
<span id="header">
<span class="right">
<i class="fa-solid fa-window-minimize"></i>
<i class="fa-solid fa-window-restore"></i>
<i class="fa-solid fa-xmark"></i>
</span>
</span>
</div>
<div class="box back-chiffre">
<span id="header">
<span class="right">
<i class="fa-solid fa-window-minimize"></i>
<i class="fa-solid fa-window-restore"></i>
<i class="fa-solid fa-xmark"></i>
</span>
</span>
</div>
<div class="box back-chiffre">
<span id="header">
<span class="right">
<i class="fa-solid fa-window-minimize"></i>
<i class="fa-solid fa-window-restore"></i>
<i class="fa-solid fa-xmark"></i>
</span>
</span>
</div>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/468849.html
標籤：javascript html jQuery css