拖拽drag_javascript 拖拽效果实现

拖拽原理

先介绍一下实现元素拖动需要的坐标属性，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();  }  } } }

拖拽效果

拖拽效果