主要原理:
1、当鼠标按下时,记录鼠标坐标,用到的是 onmousedown;
2、当鼠标移动时,计算鼠标移动的坐标之差,用到的是 onmousemove;
3、当鼠标松开时,清除事件,用到的是 onmouseup;
了解的知识:
1、div 的 offsetLeft 与 style.left 的区别:
http://longxu1314.blog.163.com/blog/static/2112990412013101814844444/
效果图如下:
突然发现有没有效果图都一样哈哈,不说废话了,上代码:
html代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf8">
<title>js拖拽效果</title>
<style type="text/css">
#div1 {
width : 200px;
height: 200px;
position: absolute;
background: #99dd33;
cursor: move;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
<script type="text/javascript">
// js代码
</script>
</html>
js代码:
window.onload function() {
var disX = disY = 0; // 鼠标距离div的左距离和上距离
var div1 = document.getElementById("div1"); // 得到div1对象
// 鼠标按下div1时
div1.onmousedown = function(e) {
var evnt = e || event; // 得到鼠标事件
disX = evnt.clientX - div1.offsetLeft; // 鼠标横坐标 - div1的left
disY = evnt.clientY - div1.offsetTop; // 鼠标纵坐标 - div1的top
// 鼠标移动时
document.onmousemove = function(e) {
var evnt = e || event;
var x = evnt.clientX - disX;
var y = evnt.clientY - disY;
var window_width = document.documentElement.clientWidth - div1.offsetWidth;
var window_height = document.documentElement.clientHeight - div1.offsetHeight;
x = ( x < 0 ) ? 0 : x; // 当div1到窗口最左边时
x = ( x > window_width ) ? window_width : x; // 当div1到窗口最右边时
y = ( y < 0 ) ? 0 : y; // 当div1到窗口最上边时
y = ( y > window_height ) ? window_height : y; // 当div1到窗口最下边时
div1.style.left = x + "px";
div1.style.top = y + "px";
};
// 鼠标抬起时
document.onmouseup = function() {
document.onmousemove =null;
document.onmouup = null;
};
return false;
};
};
当然,这个虽然支持大部分浏览器,但是,我觉得div跟随鼠标的速度有点滞后,如果有好的解决办法请联系我喔,谢谢!