js之拖拽效果
浏览数：79 /
时间：2015年06月09日
主要原理：
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跟随鼠标的速度有点滞后，如果有好的解决办法请联系我喔，谢谢！
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
