正文
js实现可视化区域内拖拽
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<style>
#div1{width: 100px;height: 100px;background-color: red;position: absolute;} </style>
<body>
<div id="div1"></div></body><script type="text/javascript">
window.onload=function(){
var oDiv=document.getElementById('div1');
disX=0;
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 l=oEvent.clientX-disX;
var t=oEvent.clientY-disY; if(l<0){
l=0;
}else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){
l=document.documentElement.clientWidth-oDiv.offsetWidth;
}if(t<0){
t=0;
}else if(t>document.documentElement.clientHeight-oDiv.offsetHeight){
t=document.documentElement.clientHeight-oDiv.offsetHeight;
}
oDiv.style.left=l+'px';
oDiv.style.top=t+'px';
}
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
} return false;//阻止默认事件 屏蔽火狐的bug
}
}
</script>
</html>
