<!DOCTYPE?html>
<html>
<head>
<meta?charset="UTF-8">
<title></title>
<style?type="text/css">
.flu{float:?left;margin-left:?20px;}
.node{width:?120px;height:?50px;border:?1px?solid?red;;margin-right:?20px;float:?left;}
</style>
</head>
<body>
<div?class="flu">
<div?class="node"?id="node1"></div>
<div?class='node'?id="node2"></div>
</div>
<script?type="text/javascript">
var?node=document.getElementsByClassName('node');
//獲取每個(gè)div的偏移量
var?arr=[];
for(var?i=0;i<node.length;i++){
arr.push([node[i].offsetLeft,node[i].offsetTop]);
}
//把拖拽元素改為定位布局
for(var?i=0;i<node.length;i++){
node[i].style.left=arr[i][0]+'px';
node[i].style.top=arr[i][1]+'px';
node[i].style.position='absolute';
node[i].style.margin=0;
}
//給每個(gè)div綁定拖拽功能
for(var?i=0;i<node.length;i++){
drag(node[i]);
}
function?drag(obj){
obj.onmousedown=function(e){
var?e?=?event?||?window.event;
//獲取偏移量
?disX?=?e.clientX?-?obj.offsetLeft;?
?disY?=?e.clientY?-?obj.offsetTop;
//鼠標(biāo)移動(dòng)事件
document.onmouseover=function(ev){
var?ev?=?event?||?window.event;
//確定拖拽元素最后的新位置
var?l?=?ev.clientX?-?disX;
t?=?ev.clientY?-?disY;
obj.style.left?=?l?+?'px';
obj.style.top?=?t?+?'px';
}
//鼠標(biāo)松開事件
document.onmouseup=function(){
document.onmouseover=null;
}
}
}
</script>
</body>
</html>
JS鼠標(biāo)拖拽事件，有時(shí)鼠標(biāo)松開了，元素還跟隨著鼠標(biāo)移動(dòng)，請大神幫忙看看是哪里出了問題。
jugge
2017-03-15 13:31:45