當(dāng)前位置：首頁 > 前端技术 > javascript >内容正文

javascript

JavaScript js 实现拖动窗口移动功能

發(fā)布時(shí)間：2023/12/18 javascript 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 JavaScript js 实现拖动窗口移动功能小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

不說廢話，直接上代碼蕪湖

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>RRHouJiZhe@163.com</title><style>#app {width: 100%;height: 100%;}.digo {position: absolute;top: 100px;left: 100px;width: 200px;height: 200px;background-color: aquamarine;border-radius: 5px;}.digo .title {position: relative;top: 5px;height: 30px;/* width: 100%; */background-color: antiquewhite;margin: 0 2px;}</style> </head><body><div id="app"><div class="digo" id="digo"><div class="title" onmousedown="f1()"></div></div></div><script>// 點(diǎn)擊窗口觸發(fā)function f1() {var digo = document.getElementById("digo");var event = event || window.event;// 1.獲取鼠標(biāo)在窗口(當(dāng)前div)中的位置var offsetX = event.offsetXvar offsetY = event.offsetYlet x = offsetXlet y = offsetY// 移動(dòng)觸發(fā)document.onmousemove = function() {var event = event || window.event;// 2.獲取鼠標(biāo)在瀏覽器中的位置var clientX = event.clientXvar clientY = event.clientY// 3.計(jì)算相對(duì)位置move(digo, clientX - x, clientY - y)}// 鼠標(biāo)彈起觸發(fā)document.onmouseup = function() {document.onmousemove = nulldocument.onmouseup = null;}}function move(digo, x, y) {// 可視窗口的大小var winWid = document.documentElement.clientWidth || document.body.clientWidth;var winHei = document.documentElement.clientHeight || document.body.clientHeight;// console.log(winWid + " === " + winHei);// 可視窗口的大小去減掉所需移動(dòng)的窗口的大小，就可以的出這個(gè)窗口所能達(dá)到的最邊緣值winWid = winWid - 10 - digo.offsetWidthwinHei = winHei - 10 - digo.offsetHeightif (x <= 0) {x = 10}if (y <= 0) {y = 10// = 100// console.log(event.clientY);}if (x > winWid) {x = winWid}if (y > winHei) {y = winHei}// console.log(x, y);digo.style.top = y + 'px'digo.style.left = x + "px"}</script></body></html>

總結(jié)

以上是生活随笔為你收集整理的JavaScript js 实现拖动窗口移动功能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。