复制代码 代码如下:
/*
拖拽流程：
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; // 清空鼠标弹起事件
}
};
您可能感兴趣的文章:
- div拖拽插件——JQ.MoveBox.js(自制JQ插件)
- javascript拖拽上传类库DropzoneJS使用方法
- ExtJS的拖拽效果示例
- js完美的div拖拽实例代码
- 鼠标拖拽移动子窗体的JS实现
- js拖拽一些常见的思路方法整理
- Nodejs+express+html5 实现拖拽上传
- js实现拖拽效果
- JS弹出可拖拽可关闭的div层完整实例
- 原生JS实现拖拽图片效果
