第一步点击需要拖动的元素, 在点击下的元素被选中,进行 move 移动, 当鼠标弹起的时候,停止动作. 点击元素 oDIV 的时候,可用的是 oDIV 区域,而 move 和 up 则是全局区域
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
- /*
- 拖拽流程:
- 1、第一步点击需要拖动的元素
- 2、在点击下的元素被选中,进行move移动
- 3、当鼠标弹起的时候,停止动作
- 4、点击元素oDIV的时候,可用的是oDIV区域,而move和up则是全局区域,也就是整个文档通用,即应该用document
- */
- oDIV = document.getElementById("gaga");
- oDIV.onmousedown = function( e ){ // 当鼠标点击下去的时候
- var diffX = e.clientX - oDIV.offsetLeft; // 点击的位置距离浏览器最左边的位置(clientX) 再减去被点击元素距离最左边的位置(oDIV.offetLeft) 在引动的所点击的元素距离最左边的位置是不确定的 所以需要这个结果
- var diffY = e.clientY - oDIV.offsetTop; // 点击的位置距离浏览器顶部的位置(clientY) 再减去被点击元素距离顶部的位置(oDIV.offsetTop) 在引动的所点击的元素距离顶部的位置是不确定的 所以需要这个结果
- document.onmousemove = function( e ){ // 当按下鼠标不放的时候
- var e = e || window.event;
- oDIV.style.top = e.clientY - diffY + "px";
- oDIV.style.left = e.clientX - diffX + "px";
- };
- document.onmouseup = function(){ // 当鼠标弹起的时候
- document.onmousemove = null; // 清空鼠标按下鼠标不放的事件
- document.onmouseup = null; // 清空鼠标弹起事件
- }
- };
来源: