js拖拽效果

Posted 2020-11-27 moshouhu

 

先创建一个div

<script>

//获取这个div

var div=document.querySelector("div");

/ 按下时开始监听在文档中鼠标移动的事件
// 开始监听鼠标松开键的事件
// 只有按下时才准备拖拽
div.onmousedown=function(e1){
// 当鼠标在文档移动时，不能再div上移动，因为鼠标可能离开div，造成无法拖拽
document.onmousemove=function(e){
// 当鼠标移动时，将当前鼠标相对视口的坐标赋值给元素的left和top
// 因为我们需要在按下的位置拖拽，因此我们还需要获取按下键鼠标相对div的左上角位置
// 使用当前鼠标位置减去这个相对元素的左上角位置，保证鼠标所按位置拖拽
div.style.left=e.clientX-e1.offsetX+"px";
div.style.top=e.clientY-e1.offsetY+"px";
}
// 当释放鼠标键时，删除鼠标移动事件和删除鼠标释放事件
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
}

</script>