js拖拽效果的原理及实现

定位元素，进行 mousedown ,mousemove,mouseup 鼠标操作，鼠标移动必然先触发mousedown,有 mousedown 也必然会触发mouseup，故而元素拖拽必须对这三个鼠标事件进行监听。

原理：

通过mousedown事件，获取目标对象，通过mousemove 改变元素的位置从而移动元素，通过mouseup来释放监听事件。

1. 创建元素，并给每个元素绑定mousedown事件

		var divs;
		// 给 html 标签添加点击事件，用于点击页面，添加一个新元素
        document.documentElement.addEventListener("click",clickhandler);
		function clickhandler(e){
            e.stopPropagation();
            createElem("div",box,{},{
                width:"60px",
                height:"60px",
                position:"absolute",
                left:e.clientX+"px",
                top:e.clientY+"px",
                background:"pink"
            });
			// 获取
            divs = document.querySelectorAll("div");
            // 给每个元素添加拖拽
			// 只有按下时才准备拖拽
			// 按下时开始监听在文档中鼠标移动的事件
			// 开始监听鼠标松开键的事件
           for(var item in divs){
                item.addEventListener("mousedown",mouseHandler);
            }
        }
		/*
			动态创建元素
			type:  表示创建元素的类型，比如 "div" "img"
			parent: 表示父容器，将创建的元素添加parent中
			props: {} 属性列表，这里只支持系统属性，不支持自定义属性
			style: {} 样式列表
		*/
         function createElem(type,parent,props,style){
		 // 创建一个元素
            var elem = document.createElement(type);
			// 给创建的元素添加 属性
            for(var item in props){
                elem[item] = props[item];
            }
			// 给创建的元素添加 样式
            if(style){
                for(var item in style){
                    elem.style[item] = style[item];
                }
            }
			// 如果传入了父容器，添加到指定父容器中，否则添加到body元素中
            parent = parent || document.body;
            parent.appendChild(elem);
            return elem;
        }

2. 根据不同的鼠标事件 进行对应操作；实现拖拽效果，

function mouseHandler(e){
			// 获取鼠标事件类型
            var _type = e.type;
            if(_type === "mousedown"){
				// 给document添加move 和 up 事件监听，是由于 鼠标在滑动的时候，容易滑出 div 区域，而失去控制，无法继续拖拽
				// 记录点击的目标对象
                document.div = e.target;
				// 记录 按下鼠标位置 相对元素左上角位置
                document.offset = {x:e.offsetX,y:e.offsetY};
				// 在 鼠标按下的时候，给document 监听鼠标移动和鼠标松开事件
                document.addEventListener("mousemove",mouseHandler);
                document.addEventListener("mouseup",mouseHandler);
            }else if(_type === "mousemove"){
			// 当鼠标移动时，将当前鼠标相对视口的坐标赋值给元素的left和top
			// 由于我们需要在按下的位置进行拖拽，所以需要减去 按下鼠标相对 目标对象左上角位置，保证鼠标所按位置拖拽
                document.div.style.left = e.clientX - document.offset.x + "px";
                document.div.style.top = e.clientY - document.offset.y + "px";
            }else if(_type === "mouseup"){
               // 当释放鼠标键时，删除鼠标移动事件和删除鼠标释放事件，不然元素继续跟着鼠标移动
                document.removeEventListener("mousemove",mouseHandler);
                document.removeEventListener("mouseup",mouseHandler);
            }
        }

注意： 拖拽元素：用要被拖拽的元素绑定mousedown，目的是获取 目标对象（即要拖拽的对象）；用 document 绑定 mousemove 和mouseup ，目的是防止鼠标滑出 目标对象区域，导致无法继续拖拽； mouseup 时必须 移除 mousemove 和 mouseup 的事件监听，目的是 防止元素一直跟着鼠标滑动

js拖拽效果的原理及实现

原文：https://www.cnblogs.com/ybzy/p/12642229.html