@xiaohaih/drag/dist/index.cjs

拖拽插件, 可通过指令或函数调用来拖拽元素移动

"use strict";var et=Object.defineProperty;var st=(i,t,e)=>t in i?et(i,t,{enumerable:!0,configurable:!0,writable:!0,value:e}):i[t]=e;var g=(i,t,e)=>st(i,typeof t!="symbol"?t+"":t,e);Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});var O=(i=>(i[i.ground=1e3]="ground",i[i.sky=2e3]="sky",i[i.troposphere=3e3]="troposphere",i[i.stratosphere=4e3]="stratosphere",i[i.mesosphere=5e3]="mesosphere",i[i.thermosphere=6e3]="thermosphere",i[i.outerspace=7e3]="outerspace",i))(O||{});function it(i){return typeof i=="function"}function rt(i){return typeof i=="string"}function q(i){return Object.prototype.toString.call(i).slice(8,-1)}function nt(i){return q(i)==="Object"}function m(i){return!!i&&i.enable!==!1}function K(){return/AppleWebKit.*Mobile.*/.test(navigator.userAgent)}function p(i,t,e){return i==null?e:typeof i=="string"?p(t.querySelectorAll(i),t):i instanceof Node?[i]:typeof i=="function"?p(i(t),t):Array.isArray(i)?i.reduce((s,r)=>{const n=p(r,t);return n&&(Array.isArray(n)?s.push(...n):s.push(n)),s},[]):i instanceof NodeList||i instanceof HTMLCollection?[...i]:e}function Y(i){return i.touches?i.touches[0]||i.changedTouches[0]:i}function D(i){return i.offsetParent||document.body||document.documentElement}function G(i,t,e){let s=i;for(;s;){if(s===t)return s;if(s===e)return null;s=s.parentElement}return null}function W(i){return{width:i.offsetWidth,height:i.offsetHeight}}function j(i,t){return window.getComputedStyle(i,t)}function S(i,t){t&&(i.classList?i.classList.add(...t.split(" ").filter(Boolean)):i.className+=t)}function H(i,t){if(!t)return;const e=t.split(" ").filter(Boolean);if(i.classList)i.classList.remove(...e);else{const s=i.className.split(" ");e.forEach(r=>{const n=s.indexOf(r);n!==-1&&s.splice(n,1)}),i.className=s.join(" ")}}function _(i,t){const e={left:0,right:0,top:0,bottom:0,x:0,y:0,width:i[`${t}Width`],height:i[`${t}Height`]};let s=i;for(;s;)e.left+=s.offsetLeft,e.top+=s.offsetTop,s=s.offsetParent;return e.x=e.left,e.y=e.top,e.bottom=e.top+e.height,e.right=e.left+e.width,e}const B=K(),L=B?"touchstart":"mousedown",$=B?"touchmove":"mousemove",I=B?"touchend":"mouseup";function J(){return{name:"BoundaryLimit",sort:O.sky+30,install(i){let t=[];i.on("start",e=>{let s=t.find(n=>n[0]===e.target);s||t.push(s=[e.target,{scrollWidth:0,scrollHeight:0}]);const r=D(e.target);s[1].scrollWidth=r.scrollWidth,s[1].scrollHeight=r.scrollHeight}),i.on("axisBeforeUpdate",(e,s)=>{if(!(s.status&&m(s.option.boundaryLimitOptions))||s.option.boundaryLimitOptions.boundaryLimit===!1)return;const n=t.find(a=>a[0]===e.target);if(!n)return;const{scrollWidth:o,scrollHeight:c}=n[1],{width:h,height:l}=W(e.target);e.x+h>o?e.x=o-h:e.x<0&&(e.x=0),e.y+l>c?e.y=c-l:e.y<0&&(e.y=0)})}}}class T{constructor(t){g(this,"option",{setCursor:V,getCursor:w,cursorOver:"move",cursorMoving:"move"});g(this,"plugins",[]);g(this,"operationDom",[]);g(this,"status",!0);g(this,"ratio",[1,1]);g(this,"brokerDoms",[]);g(this,"_cursorTouch","");g(this,"isTouching",!1);g(this,"_cursor","");g(this,"isEntering",!1);g(this,"events",{});g(this,"eventsScope",[]);this.addEventListenerForBrokerDom=this.addEventListenerForBrokerDom.bind(this),this.touchstart=this.touchstart.bind(this),this.down=this.down.bind(this),this.move=this.move.bind(this),this.up=this.up.bind(this),this.mouseenter=this.mouseenter.bind(this),this.mouseleave=this.mouseleave.bind(this),this.setPosition=this.setPosition.bind(this),this.on=this.on.bind(this),this.once=this.once.bind(this),this.off=this.off.bind(this),this.emit=this.emit.bind(this),this.option.disabled&&(this.status=!1),t&&this.updateOption(t)}updateOption(t){return Object.assign(this.option,t),t.eventProxy&&this.formatBrokerDom(),(t.target||this.option.target&&t.handle)&&this.formatDom(),this}enabled(){return this.status=!0,this.addEventsListener(),this}disabled(){return this.status=!1,V(this._cursor),this._cursor="",this.isTouching=this.isEntering=!1,this.removeEventsListener(),this}formatBrokerDom(){this.removeEventListenerForBrokerDoms();const{eventProxy:t}=this.option;this.brokerDoms=p(t,document)||[],this.addEventListenerForBrokerDoms()}addEventListenerForBrokerDoms(){this.brokerDoms.forEach(t=>{t.addEventListener(L,this.addEventListenerForBrokerDom)})}removeEventListenerForBrokerDoms(){this.brokerDoms.forEach(t=>{t.removeEventListener(L,this.addEventListenerForBrokerDom)})}formatDom(){const{target:t,handle:e}=this.option;return this.removeEventsListener(),this.operationDom=[],(this.brokerDoms.length?this.brokerDoms.reduce((r,n)=>(r.push(...p(t,n,[])),r),[]):p(t,document,[])).forEach(r=>{(p(e,r)||[r]).forEach(o=>this.operationDom.push({target:r,handle:o,x:0,y:0,dragging:!1,setPosition:this.setPosition}))}),this.status&&this.addEventsListener(),this}addEventsListener(){this.operationDom.forEach(({handle:t})=>{t.addEventListener(L,this.touchstart),B||(t.addEventListener("mouseenter",this.mouseenter),t.addEventListener("mouseleave",this.mouseleave))})}removeEventsListener(){this.operationDom.forEach(t=>{t.dragging&&this.up(t,{}),t.handle.removeEventListener(L,this.touchstart),t.handle.removeEventListener("mouseenter",this.mouseenter),t.handle.removeEventListener("mouseleave",this.mouseleave)})}addEventListenerForBrokerDom(t){const{target:e}=this.option,{operationDom:s}=this;if(!e||p(e,t.currentTarget,[]).every((a,u)=>{var f;return a===((f=s[u])==null?void 0:f.target)}))return;this.formatDom();const n=this.operationDom.find(a=>G(t.target,a.target,t.currentTarget));if(!n)return;const{clientX:o,clientY:c,pageX:h,pageY:l}=Y(t);this.down(n,{x:o,y:c,pageX:h,pageY:l},t)}touchstart(t){const e=this.operationDom.find(c=>c.handle===t.currentTarget);if(!e)return;const{clientX:s,clientY:r,pageX:n,pageY:o}=Y(t);this.down(e,{x:s,y:r,pageX:n,pageY:o},t)}down(t,e,s){s==null||s.preventDefault(),this.isTouching=!0,this.emit("beforeStart",this.getCustomEvent(t,s),this),this._cursorTouch=this.isEntering?this._cursor:document.body.style.cursor,this.option.setCursor(this.option.getCursor("down",t,this,w));const{position:r,marginLeft:n,marginTop:o}=j(t.target),c=r==="absolute"||r==="fixed",h=c?t.target.offsetLeft:0,l=c?t.target.offsetTop:0,{x:a,y:u}=t.target.getBoundingClientRect();this.ratio=T.getRatioByElement(t.target);const[f,E]=this.ratio;t.dragging=!0,t.clientX=e.x,t.clientY=e.y,t.pageX=e.pageX,t.pageY=e.pageY,t.offsetX=e.pageX-h/f,t.offsetY=e.pageY-l/E,t.offsetInsetX=Math.abs(e.x-a),t.offsetInsetY=Math.abs(e.y-u),t.initialX=h,t.initialY=l,t.ml=n&&Number.parseFloat(n)||0,t.mt=o&&Number.parseFloat(o)||0,t.x=h,t.y=l,S(t.target,this.option.classActive),this.option.classActivated&&this.operationDom.forEach(d=>{d.target===t.target?S(d.target,this.option.classActivated):H(d.target,this.option.classActivated)}),this.emit("start",this.getCustomEvent(t,s),this);const M=d=>{const{clientX:b,clientY:C,pageX:X,pageY:v}=Y(d);this.move(t,{x:b,y:C,pageX:X,pageY:v},d)},y=d=>{const{clientX:b,clientY:C,pageX:X,pageY:v}=Y(d);this.up(t,{x:b,y:C,pageX:X,pageY:v},d),window.removeEventListener($,M),window.removeEventListener(I,y)};window.addEventListener($,M,{passive:!1}),window.addEventListener(I,y,{passive:!1})}move(t,e,s){if(!this.status)return;s==null||s.preventDefault(),s==null||s.stopImmediatePropagation(),this.emit("beforeMove",this.getCustomEvent(t,s),this),S(t.target,this.option.classMoving),this.option.setCursor(this.option.getCursor("moving",t,this,w));const[r,n]=this.ratio;t.clientX=e.x,t.clientY=e.y,t.pageX=e.pageX,t.pageY=e.pageY,t.x=(e.pageX-t.offsetX)*r,t.y=(e.pageY-t.offsetY)*n,this.setPosition(t,t.target),this.emit("move",this.getCustomEvent(t,s),this)}up(t,e,s){if(!this.status)return;this.emit("beforeEnd",this.getCustomEvent(t,s),this),H(t.target,this.option.classActive),H(t.target,this.option.classMoving),this.isTouching=!1;const r=this.isEntering?"over":"up";this.option.setCursor(this.option.getCursor(r,t,this,w)||this._cursorTouch),t.dragging=!1,this.emit("end",this.getCustomEvent(t,s),this)}setPosition(t,e){let s=!1;function r(c,h){(c.x!==n.x||c.y!==n.y)&&(s=!0,n.setPosition(c,h))}const n={...t,setPosition:r};if(this.emit("axisBeforeUpdate",n,this),s)return;this.option.virtualAxis||(e.style.left=`${n.x-n.ml}px`,e.style.top=`${n.y-n.mt}px`),t.x=n.x,t.y=n.y;const o=this.operationDom.find(c=>c.target===e);o&&Object.assign(o,t),this.emit("axisUpdated",t,this)}getCustomEvent(t,e){return{...t,native:e}}mouseenter(t){const e=this.operationDom.find(s=>s.handle===t.currentTarget);e&&(this.isEntering=!0,this._cursor=this.isTouching?this._cursorTouch:document.body.style.cursor,!this.isTouching&&this.option.setCursor(this.option.getCursor("over",e,this,w)))}mouseleave(t){const e=this.operationDom.find(s=>s.handle===t.currentTarget);e&&(this.isEntering=!1,!this.isTouching&&this.option.setCursor(this.option.getCursor("out",e,this,w)||this._cursor))}on(t,e,s){return this.events[t]||(this.events[t]=[]),this.events[t].push([e,s]),this.eventsScope.forEach(r=>{r[t]||(r[t]=[]),r[t].push([e,s])}),this}once(t,e){return this.on(t,e,!0)}rebindEvents(t){t&&Object.entries(t).forEach(([e,s])=>{s.forEach(([r,n])=>{this.off(e,r),this.on(e,r,n)})})}off(t,e){return this.eventsScope.forEach(s=>s[t]&&(e?s[t]=s[t].filter(r=>r[0]!==e):delete s[t])),this.events[t]?e?(this.events[t]=this.events[t].filter(s=>s[0]!==e),this.events[t].length||delete this.events[t],this):(delete this.events[t],this):this}emit(t,...e){if(!this.events[t])return this;let s=0;return this.events[t].slice().forEach((r,n)=>{r[0].apply(null,e),r[1]&&(this.events[t].splice(n-s,1),++s)}),this}getFragmentEvents(){const t={};return{get:()=>t,run:()=>{this.eventsScope.push(t)},stop:()=>{const e=this.eventsScope.indexOf(t);e!==-1&&this.eventsScope.splice(e,1)}}}disposeEvents(t){t&&Object.entries(t).forEach(([e,s])=>s.forEach(r=>this.off(e,r[0])))}use(t){const e=t();if(!this.plugins.find(s=>s.name===e.name)){const{run:s,get:r,stop:n}=this.getFragmentEvents();if(this.plugins.push(e),s(),e.install(this),n(),e.events=r(),this.plugins.length<2)return this;this.plugins.sort((o,c)=>(o.sort||0)-(c.sort||0)),this.plugins.forEach(o=>this.rebindEvents(o.events))}return this}unuse(t){var s;const e=typeof t=="string"?this.plugins.findIndex(r=>r.name===t):t;if(e!==-1){const[r]=this.plugins.splice(e,1);r&&((s=r.uninstall)==null||s.call(r,this),this.disposeEvents(r.events))}return this}destroyed(){this.disabled(),this.plugins.forEach(t=>{var e;(e=t.uninstall)==null||e.call(t,this),this.disposeEvents(t.events),delete t.events}),this.eventsScope=[]}static getRatioByElement(t){const{width:e,height:s}=t.getBoundingClientRect(),{offsetWidth:r,offsetHeight:n}=t;return[r/e,n/s]}}function ot(i){return new T(i)}const ct={over:"cursorOver",out:"cursorOut",moving:"cursorMoving",down:"cursorDown",up:"cursorUp"};function w(i,t,e){if(e.status)return e.option[ct[i]]}function V(i){typeof i=="string"&&(document.body.style.cursor=i)}function Q(){return{name:"Direction",sort:O.sky+10,install(i){i.on("axisBeforeUpdate",(t,e)=>{if(!(e.status&&m(e.option.directionOptions)))return;e.option.directionOptions.orient==="y"?t.x=t.initialX:t.y=t.initialY})}}}function Z(){let i=[];return{name:"Scrolling",sort:O.sky,install(t){let e=0;function s(o,c){if(!(c.status&&m(c.option.scrollingOptions)))return;const h=c.option.scrollingOptions,l=i.find(x=>x[0]===o.target);if(!l)return;const[a,u]=c.ratio,{threshold:f=40,speed:E=10,scrollOption:M}=h,y={...M},{scrollWidth:d,scrollHeight:b,offsetWidth:C,offsetHeight:X,scrollTop:v,scrollLeft:P,clientWidth:z,clientHeight:U}=l[1].scrollContainer;if(d<=C&&b<=X)return;const{x:F,y:k}=l[1].scrollContainerRect;o.x=(o.clientX-F-o.offsetInsetX)*a+l[1].x,o.y=(o.clientY-k-o.offsetInsetY)*u+l[1].y;const A=o.clientX-F<f?E*-1:F+z/a-o.clientX<f?E:0,R=o.clientY-k<f?E*-1:k+U/u-o.clientY<f?E:0;if(A){const x=A>0?Math.min(P+A,d-z):Math.max(0,P+A);y.left=l[1].x=x,o.x=(o.clientX-F-o.offsetInsetX)*a+x}if(R){const x=R>0?Math.min(v+R,b-U):Math.max(0,v+R);y.top=l[1].y=x,o.y=(o.clientY-k-o.offsetInsetY)*u+x}(y.left!==void 0||y.top!==void 0)&&l[1].scrollContainer.scrollTo(y),o.setPosition(o,o.target),l[1].clientX=o.clientX,l[1].clientY=o.clientY}function r(o,c){if(!(c.status&&m(c.option.scrollingOptions)))return;const{scrollMs:h=100}=c.option.scrollingOptions;n(),s(o,c),e=setInterval(s,h,o,c)}function n(){clearInterval(e)}t.on("start",(o,c)=>{if(!(c.status&&m(c.option.scrollingOptions)))return;const{container:h}=c.option.scrollingOptions,l=typeof h=="function"?h(o):h||D(o.target);let a=i.find(u=>u[0]===o.target);a||i.push(a=[o.target,{clientX:0,clientY:0,x:0,y:0,scrollContainerRect:{},scrollContainer:null}]),Object.assign(a[1],{clientX:o.clientX,clientY:o.clientY,x:l.scrollLeft,y:l.scrollTop,scrollContainerRect:l.getBoundingClientRect(),scrollContainer:l}),r(o,c)}).on("move",r).on("end",o=>{n();const c=i.find(h=>h[0]===o.target);c&&Object.assign(c[1],{clientX:0,clientY:0,x:0,y:0})})}}}function N(){let i=[];return{name:"ShadowFollow",sort:O.thermosphere,install(t){t.on("start",(e,s)=>{if(!(s.status&&m(s.option.shadowFollowOptions)))return;const r=s.option.shadowFollowOptions;if(i.find(a=>a[0]===e.target))return;const o={createDom:l,append:ht,setDomAttrs:at,...r},c=o.createDom(o,e),h={x:0,y:0};if(r.fixed){const a=e.target.getBoundingClientRect();h.x=a.x,h.y=a.y,Object.assign(c.style,{left:`${a.x-e.ml}px`,top:`${a.y-e.mt}px`})}else{const{position:a}=j(e.target);Object.assign(c.style,{left:`${e.target.offsetLeft-e.ml}px`,top:`${e.target.offsetTop-e.mt}px`}),a!=="absolute"&&Object.assign(h,{x:e.target.offsetLeft,y:e.target.offsetTop})}if(o.append(c,e),!r.fixed&&c.parentElement!==e.target.parentElement){const a=_(e.target,"offset"),u=_(c,"offset");u.x!==a.x&&(h.x=h.x+(a.x-u.x),c.style.left=`${h.x-e.ml}px`),u.y!==a.y&&(h.y=h.y+(a.y-u.y),c.style.top=`${h.y-e.mt}px`)}i.push([e.target,{dom:c,x:h.x,y:h.y}]);function l(a){const u=e.target.cloneNode(!0);return a.setDomAttrs(u,a,e),u}}).on("axisBeforeUpdate",(e,s)=>{if(!(s.status&&m(s.option.shadowFollowOptions)))return;const r=i.find(n=>n[0]===e.target);r&&(r[1].dom.style.left=`${e.x+r[1].x-e.ml}px`,r[1].dom.style.top=`${e.y+r[1].y-e.mt}px`)}).on("end",(e,s)=>{var o;const r=i.findIndex(c=>c[0]===e.target);if(r===-1)return;const[n]=i.splice(r,1);(o=n[1].dom.parentElement)==null||o.removeChild(n[1].dom)})}}}function ht(i,t){var e;(e=t.target.parentElement)==null||e.appendChild(i)}function at(i,t,e){const s=j(e.target).boxSizing==="border-box",r=s?e.target.offsetWidth:e.target.clientWidth,n=s?e.target.offsetHeight:e.target.clientHeight;Object.assign(i.style,{opacity:"0.5",pointerEvents:"none",position:t.fixed?"fixed":"absolute",width:`${r}px`,height:`${n}px`}),S(i,t.class),t.style&&Object.assign(i.style,t.style)}const lt=["left","right","x"],ut={x:["left","right"],y:["top","bottom"]},gt={x:"width",y:"height"};function tt(){return{name:"Snap",sort:O.sky+20,install(i){let t=[];i.on("start",e=>{let s=t.find(n=>n[0]===e.target);s||t.push(s=[e.target,{scrollWidth:0,scrollHeight:0}]);const r=D(e.target);s[1].scrollWidth=r.scrollWidth,s[1].scrollHeight=r.scrollHeight}).on("axisBeforeUpdate",(e,s)=>{if(!(s.status&&m(s.option.snapOptions)))return;const r=s.option.snapOptions;if(!r.enable||r.forceSnap)return;const n=t.find(f=>f[0]===e.target);if(!n)return;const{orient:o,threshold:c=10}=r,h={width:n[1].scrollWidth,height:n[1].scrollHeight},l=W(e.target),a=o!=="y",u=o!=="x";a&&(e.x<c?e.x=0:h.width-e.x-l.width<c&&(e.x=h.width-l.width)),u&&(e.y<c?e.y=0:h.height-e.y-l.height<c&&(e.y=h.height-l.height))}).on("end",(e,s)=>{if(!(s.status&&m(s.option.snapOptions)))return;const r=s.option.snapOptions;if(!r.forceSnap)return;let n=r.forceSnapOrient||"x";const o=lt.includes(n)?"x":"y",c=gt[o],h=D(e.target).getBoundingClientRect(),l=D(e.target)[o==="x"?"scrollWidth":"scrollHeight"],a=W(e.target)[c];if(n==="x"||n==="y"){const u=ut[n];n=e[`client${n.toUpperCase()}`]-h[n]>h[c]/2?u[1]:u[0]}e[o]=n==="left"||n==="top"?0:l-a,e.setPosition(e,e.target)})}}}function ft(i){return new T(i).use(Q).use(J).use(tt).use(Z).use(N)}exports.BoundaryLimit=J;exports.Direction=Q;exports.DragCore=T;exports.Scrolling=Z;exports.ShadowFollow=N;exports.Snap=tt;exports.addElementClass=S;exports.downEventName=L;exports.drag=ft;exports.dragCore=ot;exports.getBoundingClientRect=_;exports.getElementStyle=j;exports.getEnableStatus=m;exports.getEvent=Y;exports.getMobilePlatStatus=K;exports.getParent=D;exports.getSize=W;exports.getType=q;exports.isFunction=it;exports.isMobile=B;exports.isObject=nt;exports.isString=rt;exports.matchForDomTree=G;exports.moveEventName=$;exports.parseDOM=p;exports.removeElementClass=H;exports.upEventName=I;