正文
JS实现拖拽小案例
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简单的拖拽</title>
<link rel="stylesheet" href="../toolkit/reset.min.css">
<style>
#box{
height: 200px;
width: 200px;
background-color: #e277ff;
position: absolute;
cursor: move;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box=document.getElementById("box");
function drag(e) {
e=e||window.event;
var _this=this;
var mouseX=e.clientX,
mouseY=e.clientY,
boxL=this.offsetLeft,
boxT=this.offsetTop;
document.onmousemove=function (e) {
e=e||window.event;
var curMouseX=e.clientX,
curMouseY=e.clientY,
curBoxL=curMouseX-mouseX+boxL,
curBoxT=curMouseY-mouseY+boxT; var minW=0,maxW=((document.documentElement.clientWidth||document.body.clientWidth)-_this.offsetWidth);
var minH=0,maxH=((document.documentElement.clientHeight||document.body.clientHeight)-_this.offsetHeight);
if(curBoxL<=minW){
curBoxL=minW;
}else if(curBoxL>=maxW){
curBoxL=maxW
}
if(curBoxT<=minH){
curBoxT=minH;
}else if(curBoxT>=maxH){
curBoxT=maxH;
} _this.style.left=curBoxL+"px";
_this.style.top=curBoxT+"px";
};
document.onmouseup=function () {
document.onmousemove=null;
}
}
box.onmousedown=drag;
</script>
</body>
</html>
