封装拖拽方法配合css实现拖拽粘连效果一直对css3filter很感兴趣但是一直没有搞明白怎么用，直到现在也是知道的边边

一直对css3 filter 很感兴趣但是一直没有搞明白怎么用，直到现在也是知道的边边角角，这几天对元素边缘粘连效果感兴趣如下图

自己页做了一个简陋版的，配合某个大神写的拖拽方法实现了初略效果

我暂时不会做动图，就简单示意一下效果，下面放出代码

~ function () {
	/*
	 * 拖拽插件封装 
	 */
	class Drag {
		constructor(selector, options) {
			this.initParams(selector, options);
			this._selector.addEventListener('mousedown', this.down.bind(this));
		}
		//=>参数初始化（尽可能把一切信息都挂载到实例上，这样在其它方法中，只要能获取到实例，这些信息都可以调用 =>我们尽可能保证每个方法中的THIS都是实例）
		initParams(selector, options = {}) {
			this._selector = document.querySelector(selector);

			//=>配置项的默认值信息
			let defaultParams = {
				element: this._selector,
				boundary: true,
				dragstart: null,
				dragmove: null,
				dragend: null
			};
			defaultParams = Object.assign(defaultParams, options);

			//=>把配置项信息都挂载到实例上
			Drag.each(defaultParams, (value, key) => {
				this['_' + key] = value;
			});
		}
		//=>实现拖拽的效果
		down(ev) {
			let {
				_element
			} = this;
			this.startX = ev.pageX;
			this.startY = ev.pageY;
			this.startL = Drag.queryCss(_element, 'left');
			this.startT = Drag.queryCss(_element, 'top');
			this._move = this.move.bind(this);
			this._up = this.up.bind(this);
			document.addEventListener('mousemove', this._move);
			document.addEventListener('mouseup', this._up);
			//=>钩子函数处理
			this._dragstart && this._dragstart(this, ev);
		}
		move(ev) {
			let {
				_element,
				_boundary,
				startX,
				startY,
				startL,
				startT
			} = this;
            
			let curL = ev.pageX - startX + startL,
				curT = ev.pageY - startY + startT;
			if (_boundary) {
				//=>处理边界
				let parent = _element.parentNode,
					minL = 0,
					minT = 0,
					maxL = parent.offsetWidth - _element.offsetWidth,
					maxT = parent.offsetHeight - _element.offsetHeight;
				curL = curL < minL ? minL : (curL > maxL ? maxL : curL);
				curT = curT < minT ? minT : (curT > maxT ? maxT : curT);
			}
			_element.style.left = curL + 'px';
            
			_element.style.top = curT + 'px';

			//=>钩子函数处理
			this._dragmove && this._dragmove(this, curL, curT, ev);
		}
		up(ev) {
			document.removeEventListener('mousemove', this._move);
			document.removeEventListener('mouseup', this._up);
			
			//=>钩子函数处理
			this._dragend && this._dragend(this, ev);
		}
		//=>设置工具类的方法（把它当做类[普通对象]的私有属性）
		static each(arr, callback) {
			if ('length' in arr) {
				//=>数组||类数组
				for (let i = 0; i < arr.length; i++) {
					callback && callback(arr[i], i);
				}
				return;
			}
			//=>普通对象
			for (let key in arr) {
				if (!arr.hasOwnProperty(key)) break;
				callback && callback(arr[key], key);
			}
		}
		static queryCss(curEle, attr) {
			return parseFloat(window.getComputedStyle(curEle)[attr]);
		}
	}
	window.Drag = Drag;
}();

下面事我写的结构样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin:0;padding:0}
        .wrap{
            position: relative;
            width:100vw;
            height:100vh;
            background: rgb(253, 251, 251);
            filter: contrast(80);
        }
        .item{
            position: absolute;
            left:0;

            width:100px;
            height:100px;
            border-radius: 50%;
            background: blue;
            filter: blur(10px);
            
        }
        .item2{
            top:100px
        }
        .item3{
            top:200px
        }
    </style>
</head>
<body>
    <div class="wrap">
        <div class="item item1"></div>
        <div class="item item2"></div>
        <div class="item item3"></div>
    </div>
</body>
<script src="./index.js"></script>
<script>
let item1=new Drag('.item1')
let item2=new Drag('.item2')
let item3=new Drag('.item3')

</script>
</html>

欢迎感兴趣的小伙伴撩我！