拖拽的几种实现方法解,关于拖拽功能

单个元素在body内移动最简单办法 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ padding: 0; margin: 0; } div{ width: 100px; height: 100px; background-color: red; position: absolute; } </style></head><body> <div id="div1"></div> <script> // 单个元素在body内移动 var div1 = document.querySelector("#div1") div1.onmousedown = function (e1) { // console.log(e1) 这里e1是div document.onmousemove = function (e2) { // 这里e2是document console.log(e2.clientX) // 鼠标点击与浏览器左上角的距离 console.log(e1.offsetX) // 鼠标点击距离自身左上角的距离 div1.style.left = e2.clientX - e1.offsetX + "px"; div1.style.top = e2.clientY - e1.offsetY + "px"; } document.onmouseup = function (e3) { document.onmousemove = null; } } </script></body></html> 单个元素在body内移动简单办法 html部分同上 <script> var div1 = document.querySelector("#div1") div1.addEventListener("mousedown", mouseDownHandler); // 添加鼠标按下时事件 var x, y; function mouseDownHandler(e) { x = e.offsetX; //记录鼠标按时距离自己左上角的坐标 y = e.offsetY; document.addEventListener("mousemove", mouseMoveHandler); // 移动时触发 document.addEventListener("mouseup", mouseUpHandler); // 抬起时触发 } function mouseMoveHandler(e) { div1.style.left = e.clientX - x + "px"; div1.style.top = e.clientY - y + "px"; } function mouseUpHandler(e) { document.removeEventListener("mousemove", mouseMoveHandler); document.removeEventListener("mouseup", mouseUpHandler); }</script> 多个元素在body内拖拽简单办法 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { padding: 0; margin: 0; } div { width: 50px; height: 50px; background-color: red; position: absolute; } </style></head><body> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <script> var divs = document.getElementsByTagName("div"); for (var i = 0; i < divs.length; i++) { divs[i].addEventListener("mousedown", mouseDownHandler); // 给所有div添加鼠标按下的事件 } function mouseDownHandler(e) { // this是div 在点击事件的回调函数中 this指向被侦听的对象 document.elem = this; // 给document加一个elem属性标记自己 document.x = e.offsetX; // 给document加点下时距离自身元素的坐标 document.y = e.offsetY; document.addEventListener("mousemove", mouseMoveHandler); document.addEventListener("mouseup", mouseUpHandler); } function mouseMoveHandler(e) { // 这里是侦听的document this是document this.elem.style.left = e.clientX - this.x + "px"; // 刚才把点击的元素和坐标存在document的属性内所以可以拿到 this.elem.style.top = e.clientY - this.y + "px"; } function mouseUpHandler(e) { this.removeEventListener("mousemove", mouseMoveHandler); this.removeEventListener("mouseup", mouseUpHandler); } </script></body></html> 多个元素在某个div内实现拖拽 var divs = document.querySelectorAll(".div1");for (var i = 0; i < divs.length; i++) { divs[i].addEventListener("mousedown", mouseHandler)}function mouseHandler(e) { switch (e.type) { case "mousedown": e.preventDefault(); document.elem = this; document.x = e.offsetX; document.y = e.offsetY; document.addEventListener("mousemove", mouseHandler); document.addEventListener("mouseup", mouseHandler); break; case "mousemove": var rect = this.elem.parentElement.getBoundingClientRect(); this.elem.style.left = e.clientX - rect.x - this.x + "px"; this.elem.style.top = e.clientY - rect.y - this.y + "px"; if (this.elem.offsetLeft < 0) this.elem.style.left = "0px"; if (this.elem.offsetTop < 0) this.elem.style.top = "0px"; if (this.elem.offsetLeft > rect.width - this.elem.offsetWidth) this.elem.style.left = rect.width - this.elem.offsetWidth + "px"; if (this.elem.offsetTop > rect.height - this.elem.offsetHeight) this.elem.style.top = rect.height - this.elem.offsetHeight + "px"; break; case "mouseup": this.removeEventListener("mousemove", mouseHandler); this.removeEventListener("mouseup", mouseHandler); break; }} 封装出来 var yee = (function(){ return { // 单个或多个拖拽元素:) dragOn: function (elem, bool) { // this Utils对象 elem.self = this; elem.bool = bool; elem.addEventListener("mousedown", this.mouseHandler); }, dragOff: function (elem) { elem.removeEventListener("mousedown", this.mouseHandler); }, mouseHandler: function (e) { switch (e.type) { case "mousedown": // this elem被拖拽的元素 e.preventDefault(); document.elem = this; document.x = e.offsetX; document.y = e.offsetY; document.addEventListener("mousemove", this.self.mouseHandler); document.addEventListener("mouseup", this.self.mouseHandler); break; case "mousemove": // this document var rect = this.elem.parentElement.getBoundingClientRect(); this.elem.style.left = e.clientX - rect.x - this.x + "px"; this.elem.style.top = e.clientY - rect.y - this.y + "px"; if (!this.elem.bool) return; if (this.elem.offsetLeft < 0) this.elem.style.left = "0px"; if (this.elem.offsetTop < 0) this.elem.style.top = "0px"; if (this.elem.offsetLeft > rect.width - this.elem.offsetWidth) this.elem.style.left = rect.width - this.elem.offsetWidth + "px"; if (this.elem.offsetTop > rect.height - this.elem.offsetHeight) this.elem.style.top = rect.height - this.elem.offsetHeight + "px"; break; case "mouseup": // this document this.removeEventListener("mousemove", this.elem.self.mouseHandler); this.removeEventListener("mouseup", this.elem.self.mouseHandler); break; } }, }})()