當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

js实现拖动效果

發(fā)布時(shí)間：2024/1/18 编程问答 34 豆豆

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

1. 拖動(dòng)demo1-盒子可拖動(dòng)

<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>拖動(dòng)demo1-盒子可拖動(dòng)</title><style>.box {width: 20px;height: 20px;background-color: rgb(247, 196, 196);border: 1px solid rgb(252, 153, 153);cursor: pointer;position: relative;}</style> </head><body><div class="box" id="drag"></div><script>let dragDom = document.getElementById('drag')// 獲取原有屬性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)// 鼠標(biāo)在移動(dòng)盒子上按下dragDom.onmousedown = function (e) {console.log('鼠標(biāo)按下事件')dragDom.style.backgroundColor = 'rgb(196, 217, 247)'dragDom.style.border = 'rgb(153, 196, 252)'dragDom.style.cursor = 'move'// 鼠標(biāo)按下，計(jì)算當(dāng)前元素距離可視區(qū)的距離const disX = e.clientXconst disY = e.clientY// 獲取到的值帶px 正則匹配替換let styL = nulllet styT = null// 注意在ie中第一次獲取到的值為組件自帶50% 移動(dòng)之后賦值為pxif (sty.left.includes('%')) {styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)} else {styL = +sty.left.replace(/\px/g, '')styT = +sty.top.replace(/\px/g, '')}document.onmousemove = function (e) {e.preventDefault() // 移動(dòng)時(shí)禁用默認(rèn)事件// 通過事件委托，計(jì)算移動(dòng)的距離const l = e.clientX - disXconst t = e.clientY - disY// 移動(dòng)當(dāng)前元素dragDom.style.left = `${l + styL}px`dragDom.style.top = `${t + styT}px`}document.onmouseup = mouseUp}// 鼠標(biāo)抬起function mouseUp() {console.log('鼠標(biāo)抬起事件')dragDom.style.backgroundColor = 'rgb(247, 196, 196)'dragDom.style.border = 'rgb(252, 153, 153)'dragDom.style.cursor = 'pointer'document.onmousemove = nulldocument.onmouseup = null}dragDom.oncontextmenu = function () {return false}</script> </body></html>

2. 拖動(dòng)demo2-有拖動(dòng)范圍

<!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>拖動(dòng)demo2-有拖動(dòng)范圍</title><style>.box {width: 90%;height: calc(100vh - 120px);border: 1px solid red;box-sizing: border-box;display: flex;margin-top: 20px;margin-left: 60px;}.menu {width: 200px;height: 100%;background-color: rgb(252, 213, 213);}.dragBox {position: relative;flex: 1;background-color: rgb(252, 234, 213);}.dragDom {position: absolute;width: 30px;height: 30px;background-color: rgb(141, 188, 226);top: 10px;left: 20px;cursor: pointer;}</style> </head><body><div class="box"><div class="menu"></div><div class="dragBox" id="dragBox"><div class="dragDom" id="dragDom"></div></div></div> </body> <script>const dragBox = document.getElementById('dragBox')const dragDom = document.getElementById('dragDom')// 獲取拖動(dòng)區(qū)域的邊界const dragBoxSty = dragBox.currentStyle || window.getComputedStyle(dragBox, null)console.log(dragBox.getBoundingClientRect())const boundaryL = dragBox.getBoundingClientRect().leftconst boundaryT = dragBox.getBoundingClientRect().topconst boundaryR = dragBox.getBoundingClientRect().rightconst boundaryB = dragBox.getBoundingClientRect().bottom// 瀏覽器窗口的寬高const clientWidth = document.documentElement.clientWidth || document.body.clientWidth;const clientHeight = document.documentElement.clientHeight || document.body.clientHeight;console.log('boundaryL:', boundaryL, 'boundaryT:', boundaryT, 'boundaryR:', boundaryR, 'boundaryB:', boundaryB,clientWidth, clientHeight)const sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)// 鼠標(biāo)按下dragDom.onmousedown = function (e) {dragDom.style.backgroundColor = 'rgb(247, 196, 196)'dragDom.style.cursor = 'move'// 獲取元素當(dāng)前距離可視區(qū)的距離const disX = e.clientXconst disY = e.clientY// 獲取到的值帶px 正則匹配替換let styL = nulllet styT = null// 注意在ie中第一次獲取到的值為組件自帶50% 移動(dòng)之后賦值為pxif (sty.left.includes('%')) {styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, '') / 100)styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, '') / 100)} else {styL = +sty.left.replace(/\px/g, '')styT = +sty.top.replace(/\px/g, '')}document.onmousemove = function (e) {e.preventDefault() // 移動(dòng)時(shí)禁用默認(rèn)事件// 通過事件委托，計(jì)算移動(dòng)的距離const l = e.clientX - disXconst t = e.clientY - disY// 獲取當(dāng)前要設(shè)置的const left = l + styLconst top = t + styTif (e.clientX < boundaryL) {dragDom.style.left = `0px`} else if (e.clientX > boundaryR) {dragDom.style.left = `${dragBoxSty.width-sty.width}px`} else {dragDom.style.left = `${left}px`}if (e.clientY < boundaryT) {dragDom.style.top = `0px`} else if (e.clientY > boundaryB) {dragDom.style.top = `${dragBoxSty.height}px`} else {dragDom.style.top = `${top}px`}}document.onmouseup = mouseUp}// 鼠標(biāo)抬起function mouseUp() {console.log('鼠標(biāo)抬起事件')dragDom.style.backgroundColor = 'rgb(141, 188, 226)'dragDom.style.cursor = 'pointer'document.onmousemove = nulldocument.onmouseup = null}dragDom.oncontextmenu = function () {return false} </script></html>

效果：盒子在橙色區(qū)域可拖動(dòng)

4. demo3-拖動(dòng)物體大于盒子

<!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>拖動(dòng)demo3-拖動(dòng)物體大于盒子</title><style>.box {width: 90%;height: calc(100vh - 120px);border: 1px solid red;box-sizing: border-box;display: flex;margin-top: 20px;margin-left: 60px;}.menu {width: 200px;height: 100%;background-color: rgb(252, 213, 213);}.content {flex: 1;display: flex;justify-content: center;background-color: rgb(252, 234, 213);}.dragBox {position: relative;width: 600px;height: 500px;background-color: rgb(234, 252, 213);border: 1px solid rgb(115, 221, 224);overflow: hidden;}.dragDom {position: absolute;width: 900px;height: 800px;text-align: center;line-height: 30px;top: 0px;left: 0px;cursor: pointer;}.dragDom > img {width: 900px;height: 800px;}</style></head><body><div class="box"><div class="menu"></div><div class="content"><div class="dragBox" id="dragBox"><div class="dragDom" id="dragDom"><img src="./1.png" alt="" /></div></div></div></div></body><script>const dragBox = document.getElementById("dragBox")const dragDom = document.getElementById("dragDom")// 獲取拖動(dòng)區(qū)域的邊界const dragBoxSty = dragBox.currentStyle || window.getComputedStyle(dragBox, null)const dragDomSty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)// 瀏覽器窗口的寬高const clientWidth = document.documentElement.clientWidth || document.body.clientWidthconst clientHeight = document.documentElement.clientHeight || document.body.clientHeightconst sty = dragDom.currentStyle || window.getComputedStyle(dragDom, null)// 鼠標(biāo)按下dragDom.onmousedown = function (e) {// dragDom.style.backgroundColor = "rgb(247, 196, 196)"dragDom.style.backgroundColor = "rgb(255, 254, 242)"dragDom.style.cursor = "move"// 獲取元素當(dāng)前距離可視區(qū)的距離const disX = e.clientXconst disY = e.clientY// 獲取到的值帶px 正則匹配替換let styL = nulllet styT = null// 注意在ie中第一次獲取到的值為組件自帶50% 移動(dòng)之后賦值為pxif (sty.left.includes("%")) {styL = +document.body.clientWidth * (+sty.left.replace(/\%/g, "") / 100)styT = +document.body.clientHeight * (+sty.top.replace(/\%/g, "") / 100)} else {styL = +sty.left.replace(/\px/g, "")styT = +sty.top.replace(/\px/g, "")}document.onmousemove = function (e) {e.preventDefault() // 移動(dòng)時(shí)禁用默認(rèn)事件// 通過事件委托，計(jì)算移動(dòng)的距離const l = e.clientX - disXconst t = e.clientY - disY// console.log("移動(dòng)的距離", l, t)// 獲取當(dāng)前要設(shè)置的const left = l + styLconst top = t + styT// console.log("要設(shè)置的距離", left, top)if (left > 0) {dragDom.style.left = `0px`} else if (left < -300) {dragDom.style.left = `-300px`} else {dragDom.style.left = `${left}px`}if (top > 0) {dragDom.style.top = `0px`} else if (top < -300) {dragDom.style.top = `-300px`} else {dragDom.style.top = `${top}px`}}document.onmouseup = mouseUp}// 鼠標(biāo)抬起function mouseUp() {console.log("鼠標(biāo)抬起事件")// dragDom.style.backgroundColor = "rgb(141, 188, 226)"dragDom.style.background = "none"dragDom.style.cursor = "pointer"document.onmousemove = nulldocument.onmouseup = null}dragDom.oncontextmenu = function () {return false}</script> </html>

效果：拖動(dòng)圖片在中間盒子里顯示區(qū)域內(nèi)容

總結(jié)

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

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

上一篇： bp神经网络对数据的要求,bp神经网络适
下一篇：程矢Axure夜话：Axure手机原型视