<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#box{
width:100px;
height:100px;
background:lightskyblue;
position:absolute;
}
</style>
</head>
<body>
<div id="box"></div>
</body>
</html>
<script type="text/javascript">
var box = document.querySelector("#box");
box.onmousedown=function(evt){
var e = evt || event;
var ofX = e.offsetX;
var ofY = e.offsetY;
document.onmousemove = function(evt){
var e = evt || event;
var x = e.pageX - ofX;
var y = e.pageY - ofY;
var maxX = window.innerWidth - box.offsetWidth;
var maxY = window.innerHeight - box.offsetHeight;
if(x<0){
x = 0;
}
if(y<0){
y = 0;
}
if(x>maxX){
x=maxX;
}
if(y>maxY){
y=maxY;
}
box.style.left = x + "px";
box.style.top = y + "px";
}
}
document.onmouseup=function(evt){
document.onmousemove = null;
}
var i=0;
box.ondblclick=function(evt){
var e = evt || event;
i++
if(i%2==1){
box.style.width=window.innerWidth+"px";
box.style.height=window.innerHeight+"px";
}else if(i%2==0){
box.style.width=100+"px";
box.style.height=100+"px";
}
}
</script>
js窗口拖拽
最新推荐文章于 2024-07-17 16:10:02 发布