以下代码我想展示的是一个带拖拽可以任意拉动的效果，用Es6所写，有想了解的看代码，有些不足的地方希望可以多多交流。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
position: absolute;
background: pink;
border: 0.5px solid lightblue;
}
</style>
</head>
<body>
<script type="text/javascript">
{
//元素属性的获取/更改
let body = document.querySelector("body");
function css(el,attr,val){
el.style[attr]=val;
}
let style = {};
let mouse = {};
let newmouse = {};
document.onmousedown = function(ev){//鼠标按下事件
mouse = {//鼠标初始位置
left:ev.clientX,
top:ev.clientY
}
let num = document.createElement("div");//创建元素
css(num,"left",`${mouse.left}px`)
css(num,"top",`${mouse.top}px`)
body.appendChild(num);
document.onmousemove = function(ev){//鼠标移动事件
newmouse = {//获取鼠标的新位置
left:ev.clientX,
top:ev.clientY
}
style = {//获取鼠标的移动距离
left:newmouse.left-mouse.left,
top:newmouse.top-mouse.top
}
if(style.left < 0){//高
css(num,"width",`${style.left*-1}px`)
css(num,"left",`${newmouse.left}px`)
}else{
css(num,"width",`${style.left}px`)
css(num,"left",`${mouse.left}px`)
}
if(style.top < 0){
css(num,"height",`${style.top*-1}px`)
css(num,"top",`${newmouse.top}px`)
}else{
css(num,"height",`${style.top}px`)
css(num,"top",`${mouse.top}px`)
}
}
document.onmouseup = function(){//鼠标抬起事件
document.onmousemove = null;//制空
style = {};
body.removeChild(num);//元素清除
}
}
}
</script>
</body>
</html>
