拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{width:100px;height:100px;background:red;position: absolute;left:0;top:0;}
</style>
</head>
<body>
<div class="box">hello</div>
<script>
var obox = document.querySelector(".box");
var clientW = document.documentElement.clientWidth;
var clientH = document.documentElement.clientHeight;
var boxW = obox.offsetWidth;
var boxH = obox.offsetHeight;
obox.onmousedown = function(eve){
var downE = eve || window.event;
document.onmousemove = function(eve){
var moveE = eve || window.event;
var l = moveE.pageX - downE.offsetX;
var t = moveE.pageY - downE.offsetY;
if(l<0) l=0;
if(t<0) t=0;
if(l > clientW - boxW){
l = clientW - boxW;
}
if(t > clientH - boxH){
t = clientH - boxH;
}
obox.style.left = l + "px";
obox.style.top = t + "px";
}
document.onmouseup = function(){
document.onmousemove = null;
document.onmouseup = null;
}
return false;
}
</script>
</body>
</html>
面向对象拖拽
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box{width: 100px;height: 100px;background: red;position: absolute;left:0;top:0;}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script>
class Drag{
constructor(){
this.ele = document.querySelector(".box");
this.m = this.move.bind(this);
this.u = this.up.bind(this);
this.addEvent();
}
addEvent(){
this.ele.addEventListener("mousedown", this.down.bind(this));
}
down(eve){
this.downE = eve || window.event;
document.addEventListener("mousemove",this.m);
document.addEventListener("mouseup",this.u);
}
move(eve){
this.moveE = eve || window.event;
this.ele.style.left = this.moveE.clientX - this.downE.offsetX + "px";
this.ele.style.top = this.moveE.clientY - this.downE.offsetY + "px";
var pos = {
x:this.ele.offsetLeft,
y:this.ele.offsetTop
}
localStorage.setItem("pos",JSON.stringify(pos));
}
up(){
document.removeEventListener("mousemove", this.m);
document.removeEventListener("mouseup", this.u);
}
}
new Drag;
</script>
</html>
jQuery做的拖拽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box {
width: 100px;
height: 100px;
background: red;
position: absolute;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script src="../jquery.js"></script>
<script>
$(".box").mousedown(function(event) {
var downE = event;
$(document).on("mousemove.move", function(event) {
var moveE = event;
var l = moveE.pageX - downE.offsetX;
var t = moveE.pageY - downE.offsetY;
var clientW = $(document).width();
var clientH = $(document).height();
var boxW = $(".box").outerWidth();
var boxH = $(".box").outerHeight();
if (l < 0) l = 0;
if (t < 0) t = 0;
if (l > clientW - boxW) {
l = clientW - boxW;
}
if (t > clientH - boxH) {
t = clientH - boxH;
}
$(".box").css({
left: l,
top: t
})
})
$(document).on("mouseup.up", function() {
$(document).off("mousemove.move")
$(document).off("mouseup.up")
})
})
</script>
</html>