js实现对元素的拖拽

js拖拽效果的原理及实现

js实现对元素的拖拽，主要在于将鼠标的点击事件分为三个部分：mousedown（鼠标按下），mousemove（鼠标移动），mouseup（鼠标松开）

<script>
	//通过ID先获取到需要移动的元素
	var div=document.querySelector("div");
    var offsetX,offsetY;
    //侦听div上面的鼠标按下事件
    div.addEventListener("mousedown",mouseDownHandler);
	//当鼠标按下时，执行下面的函数
    function mouseDownHandler(e){
    	//获取到鼠标相对于当前元素的位置
    	offsetX=e.offsetX;
        offsetY=e.offsetY;
       	//将div元素的拖拽委托给document，这样就不会出现，鼠标离开div无法将拖拽的问题
       	//侦听鼠标在document上移动和松开事件
        document.addEventListener("mousemove",mousemoveHandler);
        document.addEventListener("mouseup",mouseUpHandler);
    }
	//当执行鼠标移动时执行下面的函数
    function mousemoveHandler(e){
    	//修改div的位置，e.clientX，鼠标相对于可视窗口的水平距离，e.clientY，鼠标相对于可视窗口的垂直距离，减去鼠标距离目标元素的位置，就是目标元素相对于可是窗口的水平和垂直距离
        div.style.left=e.clientX-offsetX+"px";
        div.style.top=e.clientY-offsetY+"px";
    }
	//当我们松开鼠标时，要将鼠标点击事件和移动事件删除，不然出现div黏在鼠标上
	
    function mouseUpHandler(e){
        document.removeEventListener("mousemove",mousemoveHandler);
        document.removeEventListener("mouseup",mouseUpHandler);
    }
</script>

上述就是实现简单的div拖拽效果，欢迎各位提出建议