js拖拽之一:实现简单的元素拖拽

先介绍一下实现元素拖动需要的坐标属性。offsetLeft、offsetTop 和 clientX、clientY
offsetLeft \ offsetTop 用在dom节点中,可以返回当前元素距离某个父辈元素左边缘的距离
    ps.  (1)如果父辈元素中有定位的元素,那么就返回距离当前元素最近的定位元素边缘的距离。
           (2)如果父辈元素中没有定位元素,那么就返回相对于body左边缘距离。
语法: obj.offsetLeft

clientX、clientY 在事件中使用, 返回当事件被触发时鼠标指针向对于浏览器页面(或客户区)的水平坐标。  
     语法: event.clientX
js拖拽之一:实现简单的元素拖拽_第1张图片

实现原理:
选择元素时(鼠标按下)保存鼠标的位置和元素位置的差值;移动元素时(鼠标移动),不停的给元素赋值(当前鼠标位置减去保存的差值);释放元素(鼠标抬起)时,取消移动事件
实现步骤:
1、按下时保存差值:
var disX = ev.clientX - 元素.offsetLeft
var disY = ev.clientY - 元素.offsetTop
2、移动时:
元素.style.left = ev.clientX - disX + 'px';
元素.style.top= ev.clientY - disY + 'px';
3、释放元素时:
元素.onmousemove = 元素.onmouseup = null;
问题:
1、移动太快脱离元素时事件就不会执行了
onmousemove事件放在document上就可以了
2、抬起鼠标时在其他元素上抬起的,元素也不会停止
同样把onmouseup事件也放在document上

具体代码:(注:obj需要定位,否则无法获取其left,top值)
function Drag(obj){
oDiv.onmousedown = function(ev){ //鼠标按下时
ev = ev || event;
var disX = ev.clientX - obj.offsetLeft;
var disY = ev.clientY - obj.offsetTop;
document.onmousemove = function(ev){ //鼠标移动时
ev = ev || event;
obj.style.left = ev.clientX - disX + 'px';
obj.style.top = ev.clientY - disY + 'px';
}
document.onmouseup = function(){ //鼠标抬起时
document.οnmοuseup=document.οnmοusemοve=null;
}
}
}

(前端小白,如有错误,欢迎指正~~)

你可能感兴趣的:(元素拖拽)