You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
62 lines
1.6 KiB
62 lines
1.6 KiB
11 months ago
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8" />
|
||
|
|
<title></title>
|
||
|
|
<style>
|
||
|
|
#drag {
|
||
|
|
width: 300px;
|
||
|
|
height: 400px;
|
||
|
|
background-color:red;
|
||
|
|
background-size: cover;
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<script>
|
||
|
|
window.onload = function () {
|
||
|
|
var div = document.getElementById("drag");
|
||
|
|
var distanceX,distanceY;
|
||
|
|
//按下鼠标时，定义事件
|
||
|
|
div.onmousedown =function(evt){
|
||
|
|
evt= evt||window.event;
|
||
|
|
isDrag= true;
|
||
|
|
//保存鼠标相对于div的偏移量
|
||
|
|
distanceX= evt.offsetX;
|
||
|
|
distanceY= evt.offsetY;
|
||
|
|
// 按下鼠标时，定义document的移动事件
|
||
|
|
document.onmousemove=function(evt){
|
||
|
|
evt= evt||window.event;
|
||
|
|
console.log(isDrag+" onmousemove");
|
||
|
|
var divLeft= evt.clientX- distanceX;
|
||
|
|
var divTop = evt.clientY- distanceY;
|
||
|
|
var maxLeft= document.documentElement.clientWidth- div.offsetWidth;
|
||
|
|
var maxTop = document.documentElement.clientHeight- div.offsetHeight;
|
||
|
|
if(divLeft<0){
|
||
|
|
divLeft=0;
|
||
|
|
}
|
||
|
|
if(divTop<0){
|
||
|
|
divTop=0;
|
||
|
|
}
|
||
|
|
if(divLeft> maxLeft){
|
||
|
|
divLeft= maxLeft;
|
||
|
|
}
|
||
|
|
if(divTop >maxTop){
|
||
|
|
divTop= maxTop;
|
||
|
|
}
|
||
|
|
|
||
|
|
div.style.left= divLeft+"px";
|
||
|
|
div.style.top = divTop+"px";
|
||
|
|
return false;
|
||
|
|
}
|
||
|
|
document.onmouseup= function(){
|
||
|
|
document.onmousemove = null;
|
||
|
|
document.onmouseup= null;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<div id="drag"></div>
|
||
|
|
</body>
|
||
|
|
</html>
|