原生js拖拽：
<!DOCTYPE html>
<html lang="en">
<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>01-原生js的拖拽</title>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
/*
粗暴的写法
*/
// var div = document.createElement("div");
// Object.assign(div.style, {
// width: "100px",
// height: "100px",
// backgroundColor: "deeppink",
// position: "absolute"
// });
// document.body.appendChild(div);
// div.addEventListener("mousedown", mouseDownHandler);
// var x, y;
// function mouseDownHandler(e) {
// e.preventDefault();
// x = e.offsetX;
// y = e.offsetY;
// document.addEventListener("mousemove", mouseMoveHandler);
// document.addEventListener("mouseup", mouseUpHandler);
// }
// function mouseMoveHandler(e) {
// div.style.left = e.clientX - x + "px";
// div.style.top = e.clientY - y + "px";
// }
// function mouseUpHandler(e) {
// document.removeEventListener("mousemove", mouseMoveHandler);
// document.removeEventListener("mouseup", mouseUpHandler);
// }
/*
解耦的写法
*/
init();
function init() {
var divs = document.querySelectorAll("div");
for (var i = 0; i < divs.length; i++) {
divs[i].addEventListener("mousedown", mouseHandler);
Object.assign(divs[i].style, {
width: "100px",
height: "100px",
backgroundColor: "deeppink",
position: "absolute"
});
}
}
function mouseHandler(e) {
if (e.type === "mousedown") {
e.preventDefault();
document.point = {
x: e.offsetX,
y: e.offsetY
};
document.div = this;
document.addEventListener("mousemove", mouseHandler);
document.addEventListener("mouseup", mouseHandler);
} else if (e.type === "mousemove") {
this.div.style.left = e.clientX - this.point.x + "px";
this.div.style.top = e.clientY - this.point.y + "px";
} else if (e.type === "mouseup") {
this.removeEventListener("mousemove", mouseHandler);
this.removeEventListener("mouseup", mouseHandler);
}
}
</script>
</body>
</html>
jQuery拖拽：（注意jquery.js的引入是本地相对路径，如果没有可以换成网络路径）
<!DOCTYPE html>
<html lang="en">
<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>02-jQuery的拖拽</title>
<script src="./js/jquery.js"></script>
</head>
<body>
<script>
$("<div></div>").css({
width:"100px",
height:"100px",
backgroundColor:"deeppink",
position:"absolute"
}).mousedown(function(e){
var div=$(this);
$(document).mousemove(function(e1){
div.offset({
left:e1.clientX-e.offsetX,
top:e1.clientY-e.offsetY
});
});
$(document).mouseup(function(){
$(this).off("mousemove mouseup");
});
}).appendTo("body");
</script>
</body>
</html>
vue.js拖拽：（注意vue.js的引入是本地相对路径，如果没有可以换成网络路径）
<!DOCTYPE html>
<html lang="en">
<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>拖拽</title>
<style>
div{
width: 100px;
height: 100px;
background-color: deeppink;
position: absolute;
}
</style>
</head>
<body>
<div id="app" v-drag.l="flag">
</div>
<script src="./js/vue.js"></script>
<script>
Vue.directive("drag",(el,{modifiers,value})=>{
let {l,t}=modifiers;
el.addEventListener("mousedown",mousedownHandler);
let disX,disY;
function mousedownHandler(e){
disX=e.offsetX;
disY=e.offsetY;
document.addEventListener("mousemove",mousemoveHandler);
document.addEventListener("mouseup",mouseupHandler);
}
function mousemoveHandler(e){
let x=e.clientX-disX;
let y=e.clientY-disY;
if(!l&&!t){
el.style.left=x+"px";
el.style.top=y+"px";
return;
}
if((l&&t)&&value){
el.style.left=x+"px";
el.style.top=y+"px";
return;
}
if(l&&value){
el.style.left=x+"px";
return;
}
if(t&&value){
el.style.top=y+"px";
return;
}
}
function mouseupHandler(){
document.removeEventListener("mousemove",mousemoveHandler);
document.removeEventListener("mouseup",mouseupHandler);
}
})
let vm=new Vue({
el:"#app",
data:{
flag:true
}
})
</script>
</body>
</html>