JS鼠标事件完成元素拖拽（简单-高级）

JS初学者记录利用鼠标事件完成元素在页面中的拖拽

给入一个简单div，设置样式，完成div在页面中的拖拽

<style>
	div{
      
		width:50px;
		height:50px;
		background-color:red;
		position:absolute;
	}
style>
<div>div>

第一种：极简单版本，下面为JS代码

<script>
	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 (e) {
     
                document.onmousemove = null;
                document.onmouseup = null;
            }
        }
</script>

第二种：简单版本

<script>
		var div=document.querySelector("div");
        var offsetX,offsetY;
        div.addEventListener("mousedown",mouseDownHandler);

        function mouseDownHandler(e){
     
            offsetX=e.offsetX;
            offsetY=e.offsetY;
            //按下时开始监听在文档中鼠标移动的事件
            document.addEventListener("mousemove",mousemoveHandler);
            document.addEventListener("mouseup",mouseUpHandler);
        }
	
        function mousemoveHandler(e){
     
        // 用当前鼠标位置减去这个相对元素的左上角位置，保证鼠标所按位置拖拽
            div.style.left = e.clientX - offsetX + "px";
            div.style.top = e.clientY - offsetY + "px";
        }
		// 当释放鼠标键时，删除鼠标移动事件和删除鼠标释放事件
        function mouseUpHandler(e){
     
            document.removeEventListener("mousemove",mousemoveHandler);
            document.removeEventListener("mouseup",mouseUpHandler);
        }
</script>

第三种：简单升级版

<script>
var div = document.querySelector("div");
        var offsetX, offsetY;
        div.addEventListener("mousedown", mouseHandler);

        function mouseHandler(e) {
     
            if (e.type === "mousedown") {
     
                offsetX = e.offsetX;
                offsetY = e.offsetY;
                document.addEventListener("mousemove", mouseHandler);
                document.addEventListener("mouseup", mouseHandler);
            } else if (e.type === "mousemove") {
     
            // 用当前鼠标位置减去这个相对元素的左上角位置，保证鼠标所按位置拖拽
                div.style.left = e.clientX - offsetX + "px";
                div.style.top = e.clientY - offsetY + "px";
            } else if (e.type === "mouseup") {
     
            // 当释放鼠标键时，删除鼠标移动事件和删除鼠标释放事件
                document.removeEventListener("mousemove", mouseHandler);
                document.removeEventListener("mouseup", mouseHandler);
            }
        }
</script>

第四种：中级版本 拖拽多个元素时

<script>
 var divs = document.querySelectorAll("div");
        // 给每一个div元素添加鼠标按下事件
        for (i = 0; i < divs.length; i++) {
     
            divs[i].addEventListener("mousedown", mouseHandler);
        }

        function mouseHandler(e) {
     
            if (e.type === "mousedown") {
     
                //取消默认事件
                e.preventDefault();
                //this为点击的目标元素
                document.div = this;
                document.offset = {
      x: e.offsetX, y: e.offsetY };
                document.addEventListener("mousemove", mouseHandler);
                document.addEventListener("mouseup", mouseHandler);
            } else if (e.type === "mousemove") {
     
                //这里的this就是执行侦听事件的对象，也就是document，document.div就是点击的目标元素
                // this.div.style.left = e.clientX - document.offset.x + "px";
                // this.div.style.top = e.clientY - document.offset.y + "px";
                // 用当前鼠标位置减去这个相对元素的左上角位置，保证鼠标所按位置拖拽
                document.div.style.left = e.clientX - document.offset.x + "px";
                document.div.style.top = e.clientY - document.offset.y + "px";
            } else if (e.type === "mouseup") {
     
                document.removeEventListener("mousemove", mouseHandler);
                document.removeEventListener("mouseup", mouseHandler);
            }
        }
</script>

第五种：高级版本，把事件函数封装在一个对象里面，使用时直接填入参数调用；下面代码为封装好的函数

var Utils=(function(){
     
        // 封装版的拖拽
        // 不能再容器内拖拽
    return {
     
        dragOn(elem){
     
            elem.self=this;
            elem.addEventListener("mousedown",this.mouseHandler);
        },
        dragOff(elem){
     
            elem.addEventListener("mousdown",this.mouseHandler);
        },
        mouseHandler(e){
     
            if(e.type==="mousedown"){
     
                e.preventDefault();
                document.div=e.target;
                document.offset={
     x:e.offsetX,y:e.offsetY};
                document.self=this.self;
                document.addEventListener("mousemove",this.self.mouseHandler);
                document.addEventListener("mouseup",this.self.mouseHandler);
            }else if(e.type==="mousemove"){
     
                document.div.style.left=e.clientX-document.offset.x+"px";
                document.div.style.top=e.clientY-document.offset.y+"px";
            }else if(e.type==="mouseup"){
     
                // this document
                document.removeEventListener("mousemove",document.self.mouseHandler)
                document.removeEventListener("mouseup",document.self.mouseHandler)
            }
        }
    }
})();

执行时调用封装好的函数填入参数即可

<script src="./js/Utils.js">script>

给divs里面给个div都调用一次封装好的函数，这样就可以拖拽每个div元素

var divs=document.querySelectorAll("div");
            for(var i=0;i<divs.length;i++){
     
                Utils.dragOn(divs[i]);
            }

第六种：终极版本，老师没教。