您的位置：首页 > Web前端 > JavaScript

js拖拽事件及bug修复

2016-10-13 00:01 197 查看

author：卢~耐

拖拽原理：

   三个事件：onmousedown,onmouseover,onmouseup

   在firefox下，对象的拖拽bug：阻止默认事件

<!DOCTYPE html>
<head>
<meta charset="utf-8" />
<title>无标题文档</title>
<style>
#div1 {width:60px; height:60px; background:red; position:absolute;}
</style>

<script>
window.onload=function (){
var oDiv=document.getElementById('div1');

var disX=0;  //鼠标点的水平位置
var disY=0;

oDiv.onmousedown=function(ev){
var oEvent=ev||event;

disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;

document.onmousemove=function (ev){
//兼容性处理
var oEvent=ev||event;
var left=oEvent.clientX-disX;
var top=oEvent.clientY-disY;

<span style="font-family:微软雅黑;">                                        </span>//阻止物体被拖出<span style="font-family:微软雅黑;">可视区</span>
if(left<0){   //left
left=0;
//right
}else if(left>document.documentElement.clientWidth-oDiv.offsetWidth){
left=document.documentElement.clientWidth-oDiv.offsetWidth;
}

if(top<0){
top=0;
}else if(top>document.documentElement.clientHeight-oDiv.offsetHeight){
top=document.documentElement.clientHeight-oDiv.offsetHeight;
}

oDiv.style.left=left+'px';
oDiv.style.top=top+'px';
};

document.onmouseup=function (){
document.onmousemove=null;
document.onmouseup=null;
};

//<span style="color:#FF6600;">return false</span>; //firefox
};
};
</script>
</head>

<body>
<span style="font-family:微软雅黑;">       </span><div id="div1"></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航