ele-drag/index.min.js

一个简单易用的js拖动库

(function(){"use strict";(function(){const dragStateMap=new WeakMap;function initDragState(element){dragStateMap.set(element,{isDragging:false,startX:0,startY:0,startLeft:0,startTop:0,touchId:null})}function handleDragStart(element,e){const state=dragStateMap.get(element);if(!state)return;e.preventDefault();let clientX,clientY;if(e.type.includes("touch")){const touch=e.touches[0]||e.changedTouches[0];clientX=touch.clientX;clientY=touch.clientY;state.touchId=touch.identifier}else{clientX=e.clientX;clientY=e.clientY}const style=window.getComputedStyle(element);const left=parseFloat(style.left)||0;const top=parseFloat(style.top)||0;state.isDragging=true;state.startX=clientX;state.startY=clientY;state.startLeft=left;state.startTop=top;element.classList.add("dragging");const event=new CustomEvent("dragstart",{detail:{x:clientX,y:clientY}});element.dispatchEvent(event)}function handleDragMove(element,e){const state=dragStateMap.get(element);if(!state||!state.isDragging)return;e.preventDefault();let clientX,clientY;if(e.type.includes("touch")){let touch;if(e.touches){for(let i=0;i<e.touches.length;i++){if(e.touches[i].identifier===state.touchId){touch=e.touches[i];break}}}if(!touch&&e.changedTouches){for(let i=0;i<e.changedTouches.length;i++){if(e.changedTouches[i].identifier===state.touchId){touch=e.changedTouches[i];break}}}if(!touch)return;clientX=touch.clientX;clientY=touch.clientY}else{clientX=e.clientX;clientY=e.clientY}const deltaX=clientX-state.startX;const deltaY=clientY-state.startY;const newLeft=state.startLeft+deltaX;const newTop=state.startTop+deltaY;element.style.left=`${newLeft}px`;element.style.top=`${newTop}px`;const event=new CustomEvent("dragmove",{detail:{x:clientX,y:clientY,left:newLeft,top:newTop}});element.dispatchEvent(event)}function handleDragEnd(element,e){const state=dragStateMap.get(element);if(!state||!state.isDragging)return;e.preventDefault();state.isDragging=false;element.classList.remove("dragging");const event=new CustomEvent("dragend");element.dispatchEvent(event)}HTMLElement.prototype.enableDrag=function(){if(window.getComputedStyle(this).position==="static"){this.style.position="relative"}initDragState(this);this.addEventListener("mousedown",this._dragStartHandler=e=>handleDragStart(this,e));this.addEventListener("touchstart",this._dragStartHandlerTouch=e=>handleDragStart(this,e),{passive:false});document.addEventListener("mousemove",this._dragMoveHandler=e=>handleDragMove(this,e));document.addEventListener("touchmove",this._dragMoveHandlerTouch=e=>handleDragMove(this,e),{passive:false});document.addEventListener("mouseup",this._dragEndHandler=e=>handleDragEnd(this,e));document.addEventListener("touchend",this._dragEndHandlerTouch=e=>handleDragEnd(this,e));document.addEventListener("touchcancel",this._dragEndHandlerTouchCancel=e=>handleDragEnd(this,e))};HTMLElement.prototype.disableDrag=function(){if(this._dragStartHandler){this.removeEventListener("mousedown",this._dragStartHandler);this._dragStartHandler=null}if(this._dragStartHandlerTouch){this.removeEventListener("touchstart",this._dragStartHandlerTouch);this._dragStartHandlerTouch=null}if(this._dragMoveHandler){document.removeEventListener("mousemove",this._dragMoveHandler);this._dragMoveHandler=null}if(this._dragMoveHandlerTouch){document.removeEventListener("touchmove",this._dragMoveHandlerTouch);this._dragMoveHandlerTouch=null}if(this._dragEndHandler){document.removeEventListener("mouseup",this._dragEndHandler);this._dragEndHandler=null}if(this._dragEndHandlerTouch){document.removeEventListener("touchend",this._dragEndHandlerTouch);this._dragEndHandlerTouch=null}if(this._dragEndHandlerTouchCancel){document.removeEventListener("touchcancel",this._dragEndHandlerTouchCancel);this._dragEndHandlerTouchCancel=null}dragStateMap.delete(this);this.classList.remove("dragging")}})()})();