js仿QQ拖拽删除

<div id="body"> ???<div class="drag"> ???????<div class="div1 dragdom" data-target="1">1</div> ???</div> ???<div class="drag"> ???????<div class="div1 dragdom" data-target="2">36</div> ???</div> ???<div class="drag"> ???????<div class="div1 dragdom" data-target="3">7</div> ???</div> ???<div class="drag"> ???????<div class="div1 dragdom" data-target="4">15</div> ???</div> ???<div class="drag"> ???????<div class="div1 dragdom" data-target="5">9</div> ???</div> ???<div class="drag"> ???????<div class="div1 dragdom" data-target="6">14</div> ???</div></div>

#body{overflow: scroll;height: 100vh;}.drag{position: relative;padding:10px 30px;z-index: 1;}.drag div{ ???width: 40px; ???height: 40px; ???color: #FFF; ???text-align: center; ???font-size: 20px; ???line-height: 40px; ???border-radius: 50%; ???background-color: red;}.dragdom{ ???position: relative;}

CanvasRenderingContext2D.prototype.roundRect = function (x, y, w, h, r) { ???// x: 起点X坐标， y: 起点Y坐标 ?w: 宽度， h: 高度： r: 圆角弧度， ?????if (w < 2 * r) {r = w / 2;} ???if (h < 2 * r){ r = h / 2;} ???this.beginPath(); ???this.moveTo(x+r, y); ???this.arcTo(x+w, y, x+w, y+h, r); ???this.arcTo(x+w, y+h, x, y+h, r); ???this.arcTo(x, y+h, x, y, r); ???this.arcTo(x, y, x+w, y, r); ???this.closePath(); ???return this;}function Drag (params) { ???// { ???// ???dragId: dragId ???// ???max: max, ???// ???fillColor: ‘‘ ???//} ???var D = this; ???this.drag = params.drag; ???this.max = params.max || 70; ???this.texts = this.drag.innerHTML; ???this.domBody = document.getElementById(‘body‘); ???this.device = /android|iphone|ipad|ipod|webos|iemobile|opear mini|linux/i.test(navigator.userAgent.toLowerCase()); ???????this.eventName = { ???????start: this.device ? ‘touchstart‘ : ‘mousedown‘, ???????move: this.device ? ‘touchmove‘ : ‘mousemove‘, ???????end: this.device ? ‘touchend‘ : ‘mouseup‘, ???} ???????this.onDragStart = function () { ???????this.drag.style.visibility = ‘hidden‘ ???} ???this.draged = false; ???this.onDragEnd = function (d) { ???????if(!d) { ???????????D.drag.style.visibility = ‘visible‘ ???????} ???} ???this.onBeforeDelate = function () {} ???this.onDelated = function () {} ???this._r = D.drag.offsetWidth / 2; ???this.point = { ???????r: D._r, ???????x: D.offset(D.drag).left + D._r, ???????y: D.offset(D.drag).top + D._r, ???????w: D.drag.offsetWidth, ???????h: D.drag.offsetHeight ???} ???this.current = { ????????x: 0, ???????y: 0, ???????r: D.point.r, ???????direction: 0, ???????canDelate: false, ???????fillColor: ‘red‘, ???????coefficient: 0.3 ???} ???this.fullCanvas = { ???????canvas: ‘‘, ???????ctx: ‘‘, ???????width: document.documentElement.clientWidth || document.documentElement.clientWidth, ???????height: document.documentElement.clientHeight || document.documentElement.clientHeight, ???????id: ‘‘ ???} ???????this.startEvent = function (){ ???????var e = event; ???????D.point.x = D.offset(D.drag).left + D._r; ???????D.point.y = D.offset(D.drag).top + D._r ; ???????console.log(D.offset(D.drag).top) ???????var width = D.fullCanvas.width; ???????var height = D.fullCanvas.height; ???????var cssObj = { ???????????‘position‘: ‘fixed‘, ???????????‘left‘: ‘0‘, ???????????‘top‘: ‘0‘, ???????????‘zIndex‘: ‘99‘ ???????} ???????var convasObj = D.createCanvas(width, height, cssObj); ???????D.domBody.appendChild(convasObj.canvas) ???????D.fullCanvas.canvas = document.getElementById(convasObj.id); ???????D.fullCanvas.ctx = D.fullCanvas.canvas.getContext(‘2d‘); ???????if(D.device) { ???????????D.domBody.addEventListener(D.eventName.move, D.moveEvent) ???????????D.drag.addEventListener(D.eventName.end, D.endEvent) ???????} else { ???????????D.fullCanvas.canvas.addEventListener(D.eventName.move, D.moveEvent) ???????????D.fullCanvas.canvas.addEventListener(D.eventName.end, D.endEvent) ???????} ???} ???this.moveEvent = function () { ???????var e = event; ???????e.preventDefault(); ???????D.current.x = D.device ? e.touches[0].clientX : e.clientX; ???????D.current.y = D.device ? e.touches[0].clientY : e.clientY; ???????D.currentDirection = D.drawCercle(D.fullCanvas.ctx, D.fullCanvas.width, D.fullCanvas.height, D.current.fillColor, D.point.x, D.point.y, D.point.r, D.current.x, D.current.y, D.current.r, D.max) ???????if(!D.draged) { ???????????D.draged = true; ???????????D.onDragStart(D.drag) ???????} ???} ???this.endEvent = function (e) { ???????console.log(e.target) ???????if(D.device) { ???????????D.drag.removeEventListener(D.eventName.move, D.moveEvent); ???????????D.domBody.removeEventListener(D.eventName.move, D.moveEvent) ???????} else { ???????????D.fullCanvas.canvas.removeEventListener(D.eventName.move, D.moveEvent); ???????} ???????D.draged = false; ???????if(D.currentDirection > D.max) { ???????????isDelate = true; ???????????D.current.canDelate = false; ???????????D.disappear({ ???????????????x: D.current.x, ???????????????y: D.current.y, ???????????????r: D.current.r ???????????}); ???????????D.domBody.removeChild(D.fullCanvas.canvas); ???????} else { ???????????D.bounce(D.fullCanvas.ctx, D.fullCanvas.width, D.fullCanvas.height, D.current.fillColor, D.point.x, D.point.y, D.point.r, D.current.x, D.current.y, D.current.r, D.max) ???????} ???} ???????this.drag.addEventListener(D.eventName.start, D.startEvent) ???}Drag.prototype = { ???offset: function (el) { ???????var rect, win,elem = el; ???????var rect = elem.getBoundingClientRect(); ???????var win = elem.ownerDocument.defaultView; ???????return { ???????????top: rect.top + win.pageYOffset, ???????????left: rect.left + win.pageXOffset ???????}; ???????}, ???tween: { ???????/* ????????* t: current time（当前时间）； ????????* b: beginning value（初始值）； ????????* c: change in value（变化量）； ????????* d: duration（持续时间）。 ???????*/ ???????easeOut: function(t, b, c, d) { ???????????return -c *(t /= d)*(t-2) + b; ???????} ???}, ???getPoints: function (startX, startY, startR, endX, endY, endR, maxDirection) { ???????var D = this; ???????// 计算两圆距离 ???????var currentDirection = Math.sqrt( (endX-startX) * (endX-startX) ?+ (endY -startY) * (endY -startY) ) ???????????????// 计算起始圆 半径 ???????var m = (maxDirection - currentDirection) / ?maxDirection; ???????????????var startR = startR * 0.3 + startR * 0.7 * (m > 0 ? m : 0); ???????// 计算起始圆切点坐标 ???????var filletB = (endX - startX) / currentDirection ; ???????var filletA = (endY - startY) / currentDirection; ???????????????????????var startPoint = { ???????????center: { ???????????????x: startX, ???????????????y: startY, ???????????????r: startR ???????????}, ???????????a: { ???????????????x: startX + filletA * startR, ???????????????y: startY - filletB * startR ???????????}, ???????????b: { ???????????????x: startX - filletA * startR, ???????????????y: startY + filletB * startR ???????????} ???????} ???????// 计算结束圆切点坐标 ???????????????var endPoint = { ???????????center: { ???????????????x: endX, ???????????????y: endY, ???????????????r: endR ???????????}, ???????????a: { ???????????????x: endX + filletA * endR, ???????????????y: endY - filletB * endR ???????????}, ???????????b: { ???????????????x: endX - filletA * endR, ???????????????y: endY + filletB * endR ???????????} ???????} ???????if(Math.abs(currentDirection) > D.max) { ???????????D.current.canDelate = true; ???????} ???????if(D.current.canDelate) { ???????????startPoint = endPoint; ???????} ???????var ctrolPoint = { ???????????x: startX + (endX-startX)*0.5, ???????????y: startY + (endY-startY)*0.5, ???????} ???????????????return { ???????????startPoint: startPoint, ???????????endPoint: endPoint, ???????????ctrolPoint: ctrolPoint, ???????????currentDirection: currentDirection ???????} ???} , ???drawCercle: function (ctx, ctxWidth, ctxHeight, fillColor,startX, startY, startR, endX, endY, endR, maxDirection) { ???????// param: ?ctx, ctxWidth, ctxHeight, fillColor,startX, startY, startR, endX, endY, endR, maxDirection ???????var D = this; ???????var points = D.getPoints(startX, startY, startR, endX, endY, endR, maxDirection); ???????var startPoint = points.startPoint; ???????var endPoint = points.endPoint; ???????????????var ctrolPoint = points.ctrolPoint; ???????// 画起始圆 ???????ctx.clearRect(0,0, ctxWidth, ctxHeight); ???????ctx.fillStyle = D.current.fillColor; ???????ctx.beginPath(); ???????ctx.arc(startPoint.center.x,startPoint.center.y,startPoint.center.r,0 , 2*Math.PI); ???????ctx.closePath(); ???????ctx.fill(); ???????ctx.closePath(); ???????// 画结束圆 ???????ctx.beginPath(); ???????ctx.arc(endPoint.center.x,endPoint.center.y,endPoint.center.r,0, 2*Math.PI); ???????ctx.closePath(); ???????ctx.fill(); ???????ctx.closePath(); ???????// 画贝塞尔曲线填充 ???????ctx.beginPath(); ???????ctx.moveTo(startPoint.a.x, startPoint.a.y); ???????ctx.quadraticCurveTo(ctrolPoint.x, ctrolPoint.y, endPoint.a.x, endPoint.a.y); ???????ctx.lineTo(endPoint.b.x, endPoint.b.y); ???????ctx.quadraticCurveTo(ctrolPoint.x, ctrolPoint.y, startPoint.b.x, startPoint.b.y); ???????ctx.lineTo(startPoint.a.x, startPoint.a.y); ???????ctx.closePath(); ???????ctx.fill(); ???????// 画文字 ???????ctx.save() ???????ctx.textBaseline = ‘middle‘; ???????ctx.font="20px Arial"; ???????ctx.fillStyle = ‘#FFF‘; ???????ctx.textAlign=‘center‘ ???????ctx.fillText(D.texts,endPoint.center.x, endPoint.center.y,D.point.w); ???????ctx.restore() ???????????????return points.currentDirection ???}, ???bounce: function (ctx, ctxWidth, ctxHeight, fillColor,startX, startY, startR, endX, endY, endR, maxDirection) { ???????var D = this; ???????// 只需要计算随鼠标动的小球的位置 给它做bounce运动就行了 ???????var p = [{},{ // end ???????????????x: endX, ???????????????y: endY ???????????},{ // bef ???????????????x: ?startX - (endX - startX)/2, ???????????????y: ?startY - (endY - startY)/2 ???????????},{ // start ???????????????x: startX, ???????????????y: startY ???????????}, ???????] ???????var i = 0 ???????// 弹到圆心 ???????if(!D.current.canDelate) { ???????????var timer = setInterval(function (){ ???????????????i++ ???????????????D.drawCercle(ctx, ctxWidth, ctxHeight, fillColor,startX, startY, startR, p[i].x, p[i].y, endR, maxDirection); ???????????????if(i>= p.length-1) { ???????????????????clearInterval(timer) ???????????????????D.current.canDelate = false ???????????????????D.domBody.removeChild(D.fullCanvas.canvas) ???????????????????D.onDragEnd(false) ???????????????} ???????????},80) ???????} else { ???????????D.drawCercle(ctx, ctxWidth, ctxHeight, fillColor,startX, startY, startR, p[p.length-1].x, p[p.length-1].y, endR, maxDirection); ???????????D.domBody.removeChild(D.fullCanvas.canvas) ???????????D.current.canDelate = false ???????????D.onDragEnd(false) ???????} ???}, ???createCanvas: function (width, height, cssObj) { ???????console.log(‘createCanvas‘) ???????var id = ‘canvas‘ + Math.round(Math.random() * 100000); ???????var canvas = document.createElement(‘canvas‘); ???????canvas.setAttribute(‘id‘, id); ???????canvas.setAttribute(‘width‘, width); ???????canvas.setAttribute(‘height‘, height); ???????for(var item in cssObj) { ???????????canvas.style[item] = cssObj[item]; ???????} ???????return {canvas: canvas, id: id}; ???}, ???disappear: function (pos) { ???????// pos = {x: x, y: y} ?消失点的坐标 ???????var D = this; ???????D.onDragEnd(true) ???????var screenWidth = document.documentElement.clientWidth || document.body.clientWidth; ???????var timer = null; ???????var width, height, i, PI = Math.PI; ???????width = height = D.current.r * 5; ???????var cssObj = { ???????????‘position‘: ‘fixed‘, ???????????‘left‘: pos.x - width / 2 + ‘px‘, ???????????‘top‘: pos.y - height / 2 + ‘px‘ ???????} ???????var canvasObj = this.createCanvas(width, height, cssObj); ???????console.log(canvasObj) ???????document.getElementsByTagName(‘body‘)[0].appendChild(canvasObj.canvas) ???????var canvas = document.getElementById(canvasObj.id); ???????var ctx = canvas.getContext(‘2d‘); ???????var dots = []; ???????var dotsLength = Math.round(Math.random() * 3 + 5); ???????var currentStep = 0 ,allSteps = 20; ???????for (i = 0 ; i < dotsLength; i ++) { ???????????var r, x, y, a; ???????????r = D.current.r; ???????????x = Math.round(Math.random() * (width - r * 2)) + r; ???????????y = Math.round(Math.random() * (height - r * 2)) + r; ???????????a = r / allSteps; ???????????var o = { ???????????????r: r, ???????????????x: x, ???????????????y: y, ???????????????a: a ???????????} ???????????dots.push(o); ???????} ???????????????function disappear(currentStep ,allSteps) { ???????????ctx.clearRect(0, 0, width,height);// ???????????????????????ctx.fillStyle = D.current.fillColor; ???????????ctx.fillStyle = ‘#D4D4D4‘; ???????????????????????for(i = 0; i < dots.length; i ++) ?{ ???????????????ctx.beginPath(); ???????????????ctx.arc( ???????????????????D.tween.easeOut(currentStep, width/2, dots[i].x - width/2, allSteps), ???????????????????D.tween.easeOut(currentStep, height/2, dots[i].y - height/2, allSteps), ???????????????????D.tween.easeOut(currentStep, dots[i].r, -dots[i].r , allSteps), ????????????????????0, 2*PI); ???????????????ctx.closePath(); ???????????????ctx.fill(); ???????????} ???????} ???????disappear(currentStep ,allSteps) ???????timer = setInterval(function (){ ???????????currentStep ++ ; ???????????disappear(currentStep ,allSteps) ???????????if(currentStep >= allSteps) { ???????????????clearInterval(timer) ???????????????console.log(canvas) ???????????????document.getElementsByTagName(‘body‘)[0].removeChild(canvas) ???????????????D.onDelated() ???????????} ???????}, 40) ???}}function MoveDrag (params) { ???// params = { ???// ???doms: ‘‘, ?// 元素，可以是类名或者是id或者是直接获取到的元素// 本期只支持类名 ???// ???max: 70m ???// fillColor: ‘‘ ???// } ???var M = this; ???this.defaults = { ???????doms: ‘‘, ???????max: 70, ???????fillcolor: ‘‘ ???} ???this.defaults = Object.assign(this.defaults, params) ????????var d = this.defaults.doms; ???????if(typeof(d) == ‘string‘) { ???????if(/^\./.test(d)) { ???????????// 类名 ???????????this.defaults.doms = document.getElementsByClassName(d.replace(/^\./,‘‘)); ???????} else if (/^#/.test(d)){ ???????????// id名 ???????????var _dm = document.getElementById(d) ???????????if(_dm) { ???????????????this.defaults.doms = [document.getElementById(d.replace(/^#/,‘‘))]; ???????????} else { ???????????????this.defaults.doms = []; ???????????} ???????} else { ???????????// 标签名 ???????????this.defaults.doms = document.getElementsByTagName(d); ???????} ???} else { ???????// 不知道是啥玩意儿 ???} ???var obj = []; ???????for (var i = 0; i < this.defaults.doms.length; i ++) { ???????var o = new Drag({ ???????????drag: M.defaults.doms[i], ???????????max: M.defaults.max, ???????????fillColor: M.defaults.fillColor ???????}) ???????obj.push(o) ???} ???return obj; ???}new MoveDrag({ ???doms: ‘.dragdom‘, ???max: 90, ???fillcolor: ‘red‘})