![254c34ae96a318b23d21b5c667847d38.png](https://i-blog.csdnimg.cn/blog_migrate/eb3b1233da531c8f95e76bee2efd0e98.jpeg)
![10f169c125e4d48c004a23c863d8ee8c.png](https://i-blog.csdnimg.cn/blog_migrate/54f4225824cefdb5c8c78cc2aec141c8.jpeg)
拖拽原理
先介绍一下实现元素拖动需要的坐标属性,offsetLeft、offsetTop 和 clientX、clientY。
offsetLeft 和offsetTop 用在dom节点中,可以返回当前元素距离某个父辈元素左边缘的距离。
clientX、clientY 在事件中使用,返回当事件被触发时鼠标指针向对于浏览器页面的水平坐标。
注:操作当前元素要定义成绝对定位
//css #box{ width: 100px; height: 100px; background: red; position: absolute; }//dom元素
window.onload = function(){ var drag = document.getElementById('box');//选择dom元素 drag.onmousedown = function(event){ var event = event || window.event; //兼容IE浏览器 // 鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离 var diffX = event.clientX - drag.offsetLeft; var diffY = event.clientY - drag.offsetTop; if(typeof drag.setCapture !== 'undefined'){ drag.setCapture(); } document.onmousemove = function(event){ var event = event || window.event; var moveX = event.clientX - diffX; var moveY = event.clientY - diffY; if(moveX < 0){//判断最左右边临界点 moveX = 0 }else if(moveX > window.innerWidth - drag.offsetWidth){ moveX = window.innerWidth - drag.offsetWidth } if(moveY < 0){//判断最上下边临界点 moveY = 0; }else if(moveY > window.innerHeight - drag.offsetHeight){ moveY = window.innerHeight - drag.offsetHeight } drag.style.left = moveX + 'px'; drag.style.top = moveY + 'px' console.log('x:'+moveX,'y:'+moveY); } document.onmouseup = function(event){ //鼠标松开 清除onmousemove、onmouseup事件 this.onmousemove = null; this.onmouseup = null; //修复低版本ie bug if(typeof drag.releaseCapture!='undefined'){ drag.releaseCapture(); } } } }
![1b9c980d86f3cb06edf16230a41e03b4.png](https://i-blog.csdnimg.cn/blog_migrate/ab6a57c2a36479ac1117fc0ccf07dab7.jpeg)
拖拽效果
![10c85176174240b8e920f58d4ce42525.png](https://i-blog.csdnimg.cn/blog_migrate/ddbbf9d9c78ef0742d0a3226ef419b0d.jpeg)
拖拽效果