阅读量:0
拖拽两个贴贴的div
HTML结构
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Grid.js 表格</title> <style> .item { display: flex; width: 100%; height: 300px; } .item-left { flex: 1; height: 100%; background-color: black; } .item-right { position: relative; box-sizing: border-box; padding: 0 15px; width: 50%; height: 100%; background-color: aquamarine; } .item-right-control { position: absolute; left: 0; top: 0; font-size: 1; cursor: pointer; width: 5px; background-color: red; height: 100%; } </style> </head> <body> <div class="item"> <div class="item-left" style="color:white;"> <span>你可以不用假装</span> </div> <div class="item-right"> <div class="item-right-control"></div> <div class="item-right-body">12321</div> </div> </div> <div class="text"></div> <script src="./1.js"> // 代码如下面 </script> </body> </html> 核心JS代码
let control = document.querySelector(".item-right-control"); let box = document.querySelector(".item-right"); let explain = document.querySelector(".text"); control.addEventListener("mousedown", (e) => { document.body.style.userSelect = "none"; document.addEventListener("mousemove", onMouseMove); document.addEventListener("mouseup", onMouseUp); }); function onMouseMove(e) { if (window.innerWidth - e.screenX >= 300 && window.innerWidth - e.screenX <= 1200) { box.style.width = box.offsetWidth + (box.offsetLeft - e.screenX) + "px"; } } function onMouseUp() { document.body.style.userSelect = "auto"; document.removeEventListener("mousemove", onMouseMove); document.removeEventListener("mouseup", onMouseUp); } 完整JS代码
let control = document.querySelector(".item-right-control"); let box = document.querySelector(".item-right"); let explain = document.querySelector(".text"); control.addEventListener("mousedown", (e) => { document.body.style.userSelect = "none"; explain.innerHTML = ` 需要改变宽度的盒子距离最左侧屏幕的距离：${box.offsetLeft}<br/> 盒子的宽度：${box.offsetWidth}<br/> `; document.addEventListener("mousemove", onMouseMove); document.addEventListener("mouseup", onMouseUp); }); explain.innerHTML = ` 需要改变宽度的盒子距离最左侧屏幕的距离：${box.offsetLeft}<br/> 盒子的宽度：${box.offsetWidth}<br/> `; function onMouseMove(e) { explain.innerHTML = ` 需要改变宽度的盒子距离最左侧屏幕的距离：${box.offsetLeft}<br/> 盒子的宽度：${box.offsetWidth}<br/> 盒子改变后的宽度：${box.offsetWidth + box.offsetLeft - e.screenX}<br/> 鼠标相较于盒子控件的距离：${box.offsetLeft - e.screenX}<br/> 视口宽度：${window.innerWidth}<br/> 是否可以拖动：${window.innerWidth - box.offsetLeft >= 300} `; if (window.innerWidth - e.screenX >= 300 && window.innerWidth - e.screenX <= 1200) { box.style.width = box.offsetWidth + (box.offsetLeft - e.screenX) + "px"; } } function onMouseUp() { document.body.style.userSelect = "auto"; document.removeEventListener("mousemove", onMouseMove); document.removeEventListener("mouseup", onMouseUp); }