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]);
            }

第六种:终极版本,老师没教。

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 1024 设计师:白松林 返回首页