web前端：js原生拖拽实例，自定义拖拽控件，弹力吸附，拖拽对象覆盖后，影响其他div样式

1.less包装页面

* {
    margin: 0;
    padding: 0;
    #wrap {
        height: 100%;
        overflow: hidden;
        #drag-model {
            position: absolute;
            width: 100px;
            height: 100px;
            background: steelblue;
            border: 5px solid sandybrown;
            img {
                width: 100px;
                height: 100px;
            }
        }
        #drag-effect {
            //对元素进行位置操控，必须position
            position: absolute;
            width: 100px;
            height: 100px;
            background: tomato;
            border: 5px solid sandybrown;
            //这里的居中，拖拽会left+50%
            //          left: 50%;
            //          top: 50%;
            //          transform: translate3d(-50%,-50%,0);
            //这里的居中，left会增加100%
            top: 10%;
            left: 10%;
            //          top: 0;
            //          left: 0;
            //          right: 0;
            //          bottom: 0;
            //          margin: auto;
            //transition: 2s;
            text-align: center;
            font: 20px/100px "微软雅黑";
            color: white;
            span {
                position: absolute;
                margin-top: 75%;
                margin-left: -50%;
                font: 12px "微软雅黑";
                color: white;
            }
            &:hover {
                background: steelblue;
            }
        }
    }
}

2.Js原生拖拽onmousedown命名函数

/* 拖拽：
 * 1.initialPoint：获取元素初始化位置left(鼠标点击时)
 *   |-初始化鼠标点击点mousePoint(视口)
 * 2.mouseMovePoint：获取鼠标移动left(视口)
 * 3.确定鼠标移动后的位置：initialPoint+currentPoint
 * 4.鼠标移动的距离：mouseMovePoint-mousePoint=currentPoint
 */
$(function() {
	var draggerNode = document.querySelector("#drag-model");
	var effecterNode = document.querySelector("#drag-effect");
	
	dragger(draggerNode,true,50,effecterNode);
	
	//1.拖拽节点 2.是否吸附范围控制 3.弹力吸附值 4.影响节点 
	function dragger(dragNode, flag, adsorbValue,effectNode) {
		var initialPoint = {
			x: 0,
			y: 0
		};
		var mousePoint = {
			x: 0,
			y: 0
		};
		//弹力吸附默认值
		adsorbDefaultValue=10;
		//限制范围
		flagLimit=true;
		
		dragNode.onmousedown = function(e) {
			//视口e.client(x,y)
			e = e || event;
			//1.获取元素初始化位置
			//this为实践监听点-dragNode 视口dragNode.offsetLeft/top(x,y)
			initialPoint.x = this.offsetLeft;
			initialPoint.y = this.offsetTop;
			//2.鼠标初始点点击时位置
			mousePoint.x = e.clientX;
			mousePoint.y = e.clientY;

			//判断浏览器：是否有全局捕获
			if(this.setCapture) {
				this.setCapture();
			}
			//整个文档视口捕获事件，不可以使用dragNode
			document.onmousemove = function(e) {
				e = e || event;
				//移动时：视口位置e.client(x,y)
				var mouseMovePoint = {
					x: 0,
					y: 0
				};
				mouseMovePoint.x = e.clientX;
				mouseMovePoint.y = e.clientY;
				//当前移动位置-距离
				var currentPoint = {
					x: 0,
					y: 0
				};
				currentPoint.x = mouseMovePoint.x - mousePoint.x;
				currentPoint.y = mouseMovePoint.y - mousePoint.y;

				//坐标限制
				limitCurrentPoint = {
					x: 0,
					y: 0
				};
				limitCurrentPoint.x = initialPoint.x + currentPoint.x;
				limitCurrentPoint.y = initialPoint.y + currentPoint.y;
				//判断执行磁力吸附
				flag=flagLimit===false?false:true;
				if(flagLimit){
					//如果有value则修改默认值
					if(adsorbValue){
						adsorbDefaultValue=adsorbValue;
					}
					//判断是否有弹力吸附
					if(adsorbDefaultValue) {
						//if(limitCurrentPoint.x<0) 添加磁性吸附，需要更改最小值
						if(limitCurrentPoint.x < adsorbDefaultValue) {
							limitCurrentPoint.x = 0;
						}
						if(limitCurrentPoint.y < adsorbDefaultValue) {
							limitCurrentPoint.y = 0;
						}
						//如果超出视口
						if(limitCurrentPoint.y > document.documentElement.clientHeight - dragNode.offsetHeight - adsorbDefaultValue) {
							limitCurrentPoint.y = document.documentElement.clientHeight - dragNode.offsetHeight;
						}
						if(limitCurrentPoint.x > document.documentElement.clientWidth - dragNode.offsetWidth - adsorbDefaultValue) {
							limitCurrentPoint.x = document.documentElement.clientWidth - dragNode.offsetWidth;
						}
					}
				}
				//drag元素开始移动
				dragNode.style.left = limitCurrentPoint.x + "px";
				dragNode.style.top = limitCurrentPoint.y + "px";

				//判断是否存在effectNode
				if(effectNode) {
					//碰撞检测覆盖
					//1.dragnode节点
					var dragTop = dragNode.offsetTop;
					var dragLeft = dragNode.offsetLeft;
					var dragRight = dragNode.offsetLeft + dragNode.offsetWidth;
					var dragBottom = dragNode.offsetTop + dragNode.offsetHeight;
					//2.影响节点：effectNode的left
					var effectTop = effectNode.offsetTop;
					var effectLeft = effectNode.offsetLeft;
					var effectRight = effectNode.offsetLeft + effectNode.offsetWidth;
					var effectBottom = effectNode.offsetTop + effectNode.offsetHeight;

					//3.判断坐标
					if(dragRight < effectLeft || dragBottom < effectTop || dragLeft > effectRight || dragTop > effectBottom) {
						//没有移动到，可更换图片 imgNode.src=""
						effectNode.style.fontSize = "20px";
					} else {
						effectNode.style.fontSize = "50px";
					}
				}

			}
			//鼠标抬起，清空事件
			document.onmouseup = function() {
				document.onmouseup = document.onmousemove = null;
				if(document.releaseCapture) {
					document.releaseCapture();
				}

			}

			//避免浏览器默认事件触发，改变left。这个方法无法禁止IE8	
			return false;
			/*使用全局捕获
			 * element.setCapture：处理mousedown事件，全部鼠标事件重定向到这个元素，直到鼠标被释放或者document.releaseCapture
			 * releaseCapture：如果启用了鼠标捕获，则生成释放事件
			 * 谷歌：没有全局捕获
			 * 火狐：有全局捕获定义，但没有实际作用
			 * IE：有全局捕获，有作用
			 */

		}

	};

})

3.原js函数调用拖拽，html调用js

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
		<title>js原生拖拽组件</title>
	</head>
	<link rel="stylesheet" href="css/dragger-module.css" />

	<body>
		<div id="wrap">
			<div id="drag-model">
				<img src="img/my-logo-2.png" />
			</div>
			<div id="drag-effect">拖拽控件
				<span>一刀coder</span>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../6-bootstrap/js/jquery.min.js"></script>
	<script type="text/javascript" src="js/dragger-module.js"></script>

</html>

3.优化生成拖拽组件js

/* 拖拽：
 * 1.initialPoint：获取元素初始化位置left(鼠标点击时)
 *   |-初始化鼠标点击点mousePoint(视口)
 * 2.mouseMovePoint：获取鼠标移动left(视口)
 * 3.确定鼠标移动后的位置：initialPoint+currentPoint
 * 4.鼠标移动的距离：mouseMovePoint-mousePoint=currentPoint
 */

//函数自调用
(function(w) {
	w.drag = {};
	drag.dragger = //1.拖拽节点 2.是否吸附范围控制 3.弹力吸附值 4.影响节点 
		function dragger(dragNode, flag, adsorbValue, effectNode) {
			var initialPoint = {
				x: 0,
				y: 0
			};
			var mousePoint = {
				x: 0,
				y: 0
			};
			//弹力吸附默认值
			adsorbDefaultValue = 10;
			//限制范围
			flagLimit = true;

			dragNode.onmousedown = function(e) {
				//视口e.client(x,y)
				e = e || event;
				//1.获取元素初始化位置
				//this为实践监听点-dragNode 视口dragNode.offsetLeft/top(x,y)
				initialPoint.x = this.offsetLeft;
				initialPoint.y = this.offsetTop;
				//2.鼠标初始点点击时位置
				mousePoint.x = e.clientX;
				mousePoint.y = e.clientY;

				//判断浏览器：是否有全局捕获
				if(this.setCapture) {
					this.setCapture();
				}
				//整个文档视口捕获事件，不可以使用dragNode
				document.onmousemove = function(e) {
					e = e || event;
					//移动时：视口位置e.client(x,y)
					var mouseMovePoint = {
						x: 0,
						y: 0
					};
					mouseMovePoint.x = e.clientX;
					mouseMovePoint.y = e.clientY;
					//当前移动位置-距离
					var currentPoint = {
						x: 0,
						y: 0
					};
					currentPoint.x = mouseMovePoint.x - mousePoint.x;
					currentPoint.y = mouseMovePoint.y - mousePoint.y;

					//坐标限制
					limitCurrentPoint = {
						x: 0,
						y: 0
					};
					limitCurrentPoint.x = initialPoint.x + currentPoint.x;
					limitCurrentPoint.y = initialPoint.y + currentPoint.y;
					//判断执行磁力吸附
					flag = flagLimit === false ? false : true;
					if(flagLimit) {
						//如果有value则修改默认值
						if(adsorbValue) {
							adsorbDefaultValue = adsorbValue;
						}
						//判断是否有弹力吸附
						if(adsorbDefaultValue) {
							//if(limitCurrentPoint.x<0) 添加磁性吸附，需要更改最小值
							if(limitCurrentPoint.x < adsorbDefaultValue) {
								limitCurrentPoint.x = 0;
							}
							if(limitCurrentPoint.y < adsorbDefaultValue) {
								limitCurrentPoint.y = 0;
							}
							//如果超出视口
							if(limitCurrentPoint.y > document.documentElement.clientHeight - dragNode.offsetHeight - adsorbDefaultValue) {
								limitCurrentPoint.y = document.documentElement.clientHeight - dragNode.offsetHeight;
							}
							if(limitCurrentPoint.x > document.documentElement.clientWidth - dragNode.offsetWidth - adsorbDefaultValue) {
								limitCurrentPoint.x = document.documentElement.clientWidth - dragNode.offsetWidth;
							}
						}
					}
					//drag元素开始移动
					dragNode.style.left = limitCurrentPoint.x + "px";
					dragNode.style.top = limitCurrentPoint.y + "px";

					//判断是否存在effectNode
					if(effectNode) {
						//碰撞检测覆盖
						//1.dragnode节点
						var dragTop = dragNode.offsetTop;
						var dragLeft = dragNode.offsetLeft;
						var dragRight = dragNode.offsetLeft + dragNode.offsetWidth;
						var dragBottom = dragNode.offsetTop + dragNode.offsetHeight;
						//2.影响节点：effectNode的left
						var effectTop = effectNode.offsetTop;
						var effectLeft = effectNode.offsetLeft;
						var effectRight = effectNode.offsetLeft + effectNode.offsetWidth;
						var effectBottom = effectNode.offsetTop + effectNode.offsetHeight;

						//3.判断坐标
						if(dragRight < effectLeft || dragBottom < effectTop || dragLeft > effectRight || dragTop > effectBottom) {
							//没有移动到，可更换图片 imgNode.src=""
							effectNode.style.fontSize = "20px";
						} else {
							effectNode.style.fontSize = "50px";
						}
					}

				}
				//鼠标抬起，清空事件
				document.onmouseup = function() {
					document.onmouseup = document.onmousemove = null;
					if(document.releaseCapture) {
						document.releaseCapture();
					}

				}

				//避免浏览器默认事件触发，改变left。这个方法无法禁止IE8	
				return false;
				/*使用全局捕获
				 * element.setCapture：处理mousedown事件，全部鼠标事件重定向到这个元素，直到鼠标被释放或者document.releaseCapture
				 * releaseCapture：如果启用了鼠标捕获，则生成释放事件
				 * 谷歌：没有全局捕获
				 * 火狐：有全局捕获定义，但没有实际作用
				 * IE：有全局捕获，有作用
				 */

			}

		};

})(window);

4…html调用组件

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
		<title>js原生拖拽组件</title>
	</head>
	<link rel="stylesheet" href="css/dragger-module.css" />

	<body>
		<div id="wrap">
			<div id="drag-model">
				<img src="img/my-logo-2.png" />
			</div>
			<div id="drag-effect">拖拽控件
				<span>一刀coder</span>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="../6-bootstrap/js/jquery.min.js"></script>
	<script type="text/javascript" src="js/dragger-module.js"></script>
	<script type="text/javascript">
		$(function() {
			var draggerNode = document.querySelector("#drag-model");
			var effecterNode = document.querySelector("#drag-effect");

			drag.dragger(draggerNode, true, 50, effecterNode);

		})
	</script>

</html>

5.效果图