I have always been interested in CSS3 filter, but I have not been able to figure out how to use it. Until now, I still know the edges and corners. These days, I am interested in the edge adhesion effect of elements as shown in the figure below

~ functionConstructor (selector, options) {this.initparams (selector, options); this._selector.addEventListener('mousedown', this.down.bind(this)); } //=> parameter initialization (mount as much information as possible on the instance, so that in other methods, as long as the instance is available, All of THIS information can be called => we're trying to make sure that THIS is an instance in every method) initParams(Selector, options = {}) { this._selector = document.querySelector(selector); //=> Default value of the configuration itemlet 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; }); } //=> drag 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); //=> The hook function handles 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) {//=> Handle boundarylet 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'; //=> the hook function handles this._dragmove && this._dragmove(this, curL, curT, ev); } up(ev) { document.removeEventListener('mousemove', this._move);
			document.removeEventListener('mouseup', this._up); //=> The hook function handles this._dragend && this._dragend(this, ev); } //=> set the method of the utility class (treat it as a private property of the class [ordinary object]) static each(arr, callback) {if ('length' inArr) {/ / = > array | | class arrayfor (let i = 0; i < arr.length; i++) {
					callback && callback(arr[i], i);
				}
				return; } //=> Common objectsfor (let key in arr) {
				if(! arr.hasOwnProperty(key))break;
				callback && callback(arr[key], key);
			}
		}
		static queryCss(curEle, attr) {
			returnparseFloat(window.getComputedStyle(curEle)[attr]); } } window.Drag = Drag; } ();Copy the code

The following is the structure I wrote

<! 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>
Copy the code

Welcome interested partners to tease me!