拖拽事件函数不知道为什么改前和改后效果不一样，改前一卡一卡的，改了之后就很顺畅了
原来的代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>鼠标拖动小方块</title>
<style type="text/css">
.lineDiv{position:absolute;height:5px;font-size:0;line-height:0;background:#999;width:500px;top:100px;left:50%;margin-left:-250px}
.lineDiv .minDiv{position:absolute;top:-5px;left:0;width:15px;height:15px;background:#000;cursor:pointer}
</style>
</head>
<body>
<center><h3>用鼠标拖动小方块</h3></center>
<div id="lineDiv">
<div id="minDiv"></div>
</div>
<script>
document.onselectstart = new Function("event.returnValue=false;")
var minDiv=document.getElementById("minDiv");
var lineDiv=document.getElementById("lineDiv");
var keyPress=false;
minDiv.onmousedown=function(){
keyPress=true;
}
window.onmouseup=function(){
keyPress=false;
}
window.onmousemove=function(e){
var x=e.clientX;//鼠标的X坐标
var leftBefore=getPosition(minDiv).left;//滑块相对于屏幕左侧的距离
var addWidth="";
if(keyPress==true){
addWidth=x-leftBefore-7.5;
console.log("x:"+x+",leftBefore:"+leftBefore+",addWidth:"+addWidth)
//if(x>=getPosition(lineDiv).left)
minDiv.style.left=addWidth+"px";
console.log(minDiv.style.left)
}
}
// 通过offset求出相对于屏幕的距离
function getPosition(node) {
var left = node.offsetLeft;
var top = node.offsetTop;
var parent = node.offsetParent;
while (parent != null) {
left += parent.offsetLeft;
top += parent.offsetTop;
parent = parent.offsetParent;
}
return {
"left" : left,
"top" : top
};
}
</script>
</body>
</html>
更改后的mousemove：
window.onmousemove=function(e){
var x=e.clientX;//鼠标的X坐标
var addWidth="";
var lineLeft=getPosition(lineDiv).left;
var lineRight=lineLeft+lineDiv.offsetWidth;
if(keyPress==true){
addWidth=x-lineLeft-7.5;
console.log("x:"+x+",left:"+lineLeft+",addWidth:"+addWidth)
if((x>=lineLeft)&&(x<=lineRight))
minDiv.style.left=addWidth+"px";
console.log(minDiv.style.left)
}
}
