2. 技术博客
  3. VUE：实现网页中元素的拖动

VUE：实现网页中元素的拖动

tech2023-02-01  109

简介

实现页面中的元素拖动。

学习案例（HTML：可任意拖动）

→ 链接地址 ←

<html> <head> <title>拖动效果bai函数演示 by Longbill.cn</title> <style> body { font-size: 12px; color: #333333; border: 0px solid blue; } div { position: absolute; background-color: #c3d9ff; margin: 0px; padding: 5px; border: 0px; width: 100px; height: 100px; } </style> </head> <body> <script> function drag(o, s) { if (typeof o == "string") o = document.getElementById(o); o.orig_x = parseInt(o.style.left) - document.body.scrollLeft; o.orig_y = parseInt(o.style.top) - document.body.scrollTop; o.orig_index = o.style.zIndex; o.onmousedown = function (a) { this.style.cursor = "move"; this.style.zIndex = 10000; var d = document; if (!a) a = window.event; var x = a.clientX + d.body.scrollLeft - o.offsetLeft; var y = a.clientY + d.body.scrollTop - o.offsetTop; d.ondragstart = "return false;" d.onselectstart = "return false;" d.onselect = "document.selection.empty();" if (o.setCapture) o.setCapture(); else if (window.captureEvents) window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); d.onmousemove = function (a) { if (!a) a = window.event; o.style.left = a.clientX + document.body.scrollLeft - x; o.style.top = a.clientY + document.body.scrollTop - y; o.orig_x = parseInt(o.style.left) - document.body.scrollLeft; o.orig_y = parseInt(o.style.top) - document.body.scrollTop; } d.onmouseup = function () { if (o.releaseCapture) o.releaseCapture(); else if (window.captureEvents) window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP); d.onmousemove = null; d.onmouseup = null; d.ondragstart = null; d.onselectstart = null; d.onselect = null; o.style.cursor = "normal"; o.style.zIndex = o.orig_index; } } if (s) { var orig_scroll = window.onscroll ? window.onscroll : function () {}; window.onscroll = function () { orig_scroll(); o.style.left = o.orig_x + document.body.scrollLeft; o.style.top = o.orig_y + document.body.scrollTop; } } } </script> <div id="div1" style="left:10px;top:10px;">div1:我可以被拖动</div> <div id="div2" style="left:120px;top:10px;background-color : #f3d9ff">div2:来拖我呀zhi</div> <div id="div3" style="left:230px;top:10px;background-color : #c3ffff">div3:我随便你拖</div> <div id="div4" style="left:10px;top:120px;background-color : #c3d944">div4:我可以随窗口滑动，把我拖到最下面，然后滚动网dao页看看</div> <div id="div5" style="left:120px;top:120px;background-color : #f3d944">作者: Longbill <a href=http://www.longbill.cn target=_blank>www.longbill.cn</a> </div> <div id="div6" style="left:230px;top:120px;background-color : #e3f944;width:200px;">参数说明: drag(obj [,scroll]); obj:对象的id或对象本身; scroll(可选):对象是否随窗口拖动而滑动，默认为否 鼠标右键查看源代码 </div> <script> drag("div1"); drag("div2"); drag("div3"); drag("div4", 1); drag("div5", 1); drag("div6", 1); </script> </body> </html>

自我实现（VUE：指定范围内的横向拖动）

<template> <div> <div class="moveBox"> <div class="leftDiv"></div> <div class="lineMoveDiv" draggable="true" @mousedown="moveLineFun"></div> <div class="rightDiv"></div> </div> </div> </template> <script> export default { data: () { return { leftMin: 80 // 左边距最小值 } }, methods: { moveLineFun (e) { let that = this let moveBoxObj = document.getElementsByClassName('moveBox')[0] // 最大的框，自带相对定位属性 let leftDiv = document.getElementsByClassName('leftDiv')[0] // 左边的盒子 let moveLineObj = document.getElementsByClassName('lineMoveDiv')[0] // 移动的线条 let rightDiv = document.getElementsByClassName('rightDiv')[0] // 右边的盒子 let moveBoxObjMaxWidth = moveBoxObj.clientWidth // 得到点击时该line所在大容器的宽 let moveLineObjOffsetLeft = moveLineObj.offsetLeft // 得到点击时该line的左边距 let moveStartX = e.clientX // 得到当前鼠标点击的x位置 let leftMax = moveBoxObjMaxWidth - that.leftMin // 左边距最大值 document.addEventListener('mousemove', moveFun) // 添加监听事件，鼠标开始移动 document.addEventListener('mouseup', stopFun) // 添加监听事件，鼠标停止移动 // 绑定鼠标移动时的计算 function moveFun (e) { e.preventDefault() let mouseMoveDistance = e.clientX - moveStartX // 鼠标滑动距离（正则是往右；负则是往左） moveLineObj.style.positon = 'absolute' // 给线条的元素添加绝对定位属性 let styleLeft = moveLineObjOffsetLeft + mouseMoveDistance // 左边距 = 线条初始（左边距）位置 + 鼠标滑动的距离 if (styleLeft <= that.leftMin) { styleLeft = that.leftMin } else if (styleLeft > leftMax) { styleLeft = leftMax } moveLineObj.style.left = styleLeft + 'px' // 赋值拖动的线的左边距离 leftDiv.style.width = styleLeft + 'px' // 赋值左边盒子的宽度 rightDiv.style.width = moveBoxObjMaxWidth - styleLeft - moveLineObj.clientWidth + 'px' // 赋值右边盒字的宽度 } // 取消计算绑定 function stopFun (e) { document.removeEventListener('mousemove', moveFun) // 取消监听事件，鼠标开始移动 document.removeEventListener('mouseup', stopFun) // 取消监听事件，鼠标停止移动 } } } } </script> <style lang="less" scoped> .moveBox { position: relative; width: 100%; height: 200px; border: 1px solid red; display: flex; .leftDiv { width: 79px; height: 100%; background: #438bef; } .rightDiv { width: 119; height: 100%; background: #d8d528; margin-left: 2px; } .lineMoveDiv { width: 2px; height: 100px; position: absolute; left: 80px; top: 0; background: red; } } </style>

最后

觉得有用的朋友请用你的金手指点一下赞，或者评论留言一起探讨技术！

最新回复(0)