@skillnull/drage-js
Version:
拖拽元素到页面任意位置**支持平台:** 浏览器 · 微信小程序 · Node.js · React Native
1 lines • 14 kB
JavaScript
function t(t){return t&&t.__esModule&&Object.prototype.hasOwnProperty.call(t,"default")?t.default:t}var e,n={exports:{}};(e=n).exports=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},e.exports.__esModule=!0,e.exports.default=e.exports;var i=t(n.exports),o={exports:{}},s={exports:{}},r={exports:{}};!function(t){function e(n){return t.exports=e="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},t.exports.__esModule=!0,t.exports.default=t.exports,e(n)}t.exports=e,t.exports.__esModule=!0,t.exports.default=t.exports}(r);var c=r.exports,u={exports:{}};!function(t){var e=c.default;t.exports=function(t,n){if("object"!=e(t)||!t)return t;var i=t[Symbol.toPrimitive];if(void 0!==i){var o=i.call(t,n||"default");if("object"!=e(o))return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(t)},t.exports.__esModule=!0,t.exports.default=t.exports}(u);var h=u.exports;!function(t){var e=c.default,n=h;t.exports=function(t){var i=n(t,"string");return"symbol"==e(i)?i:i+""},t.exports.__esModule=!0,t.exports.default=t.exports}(s);var a=s.exports;!function(t){var e=a;function n(t,n){for(var i=0;i<n.length;i++){var o=n[i];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,e(o.key),o)}}t.exports=function(t,e,i){return e&&n(t.prototype,e),i&&n(t,i),Object.defineProperty(t,"prototype",{writable:!1}),t},t.exports.__esModule=!0,t.exports.default=t.exports}(o);var f=t(o.exports),l=new(function(){return f((function t(){i(this,t),this.ref=null,this.draggingFlag=!1,this.initX=void 0,this.initY=void 0,this.currentX=0,this.currentY=0,this.offsetX=0,this.offsetY=0,this.pageX=void 0,this.pageY=void 0,this.style={position:"fixed",zIndex:"999999"},this.setStorage="local",this.animationFrame=null,this._detectPlatform(),this._initAdapter()}),[{key:"_detectPlatform",value:function(){if("undefined"!=typeof wx&&"function"==typeof wx.getSystemInfoSync)this.platform="weixin";else if("undefined"!=typeof global&&global.__DEV__)try{var t=require("react-native");t.Platform&&(this.platform="rn",this.Platform=t.Platform,this.Dimensions=t.Dimensions)}catch(t){this.platform="browser"}else"undefined"==typeof window||null===window?this.platform="node":this.platform="browser"}},{key:"_initAdapter",value:function(){switch(this.platform){case"browser":this._initBrowser();break;case"weixin":this._initWeixin();break;case"node":this._initNode();break;case"rn":this._initRN()}}},{key:"_initBrowser",value:function(){var t=this;this._getClientSize=function(){return{w:window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,h:window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}},this._getElementRect=function(t){return t.getBoundingClientRect()},this._setElementPosition=function(t,e,n){t.style.transform="translate3d(".concat(e,"px, ").concat(n,"px, 0)")},this._bindEvent=function(t,e,n,i){t.addEventListener(e,n,i)},this._unbindEvent=function(t,e,n){t.removeEventListener(e,n)},this._bindDocEvent=function(t,e,n){document.addEventListener(t,e,n)},this._unbindDocEvent=function(t,e){document.removeEventListener(t,e)},this._raf=function(t){return requestAnimationFrame(t)},this._cancelRaf=function(t){return cancelAnimationFrame(t)},this._storage={get:function(t){try{return localStorage.getItem(t)}catch(t){return null}},set:function(t,e){try{localStorage.setItem(t,e)}catch(t){}},remove:function(t){try{localStorage.removeItem(t)}catch(t){}},getSession:function(t){try{return sessionStorage.getItem(t)}catch(t){return null}},setSession:function(t,e){try{sessionStorage.setItem(t,e)}catch(t){}},removeSession:function(t){try{sessionStorage.removeItem(t)}catch(t){}}},this._onResize=function(){t.clientW=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,t.clientH=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight,t.resetPosition()},window.addEventListener("resize",this._onResize);var e=this._getClientSize();this.clientW=e.w,this.clientH=e.h}},{key:"_initWeixin",value:function(){var t=this,e=getCurrentPages(),n=e[e.length-1],i=n?n.$page:null;this._getClientSize=function(){var t=wx.getSystemInfoSync();return{w:t.windowWidth,h:t.windowHeight}},this._getElementRect=function(t){return new Promise((function(e){wx.createSelectorQuery().in(i).select(t).boundingClientRect((function(t){e(t||{top:0,bottom:0,left:0,right:0,width:0,height:0})})).exec()}))},this._setElementPosition=function(t,e,n){t.setData({dragStyle:{transform:"translate3d(".concat(e,"px, ").concat(n,"px, 0)")}})},this._bindEvent=function(t,e,n){t[e]=n},this._unbindEvent=function(t,e){t[e]=null},this._bindDocEvent=function(e,n){t._globalHandlers=t._globalHandlers||{},t._globalHandlers[e]=n},this._unbindDocEvent=function(e){t._globalHandlers&&(t._globalHandlers[e]=null)},this._raf=function(t){t()},this._cancelRaf=function(t){},this._storage={get:function(t){try{return wx.getStorageSync(t)}catch(t){return null}},set:function(t,e){try{wx.setStorageSync(t,e)}catch(t){}},remove:function(t){try{wx.removeStorageSync(t)}catch(t){}},getSession:function(t){try{return wx.getStorageSync(t)}catch(t){return null}},setSession:function(t,e){try{wx.setStorageSync(t,e)}catch(t){}},removeSession:function(t){try{wx.removeStorageSync(t)}catch(t){}}},this._onResize=function(){wx.onWindowResize((function(e){t.clientW=e.windowWidth,t.clientH=e.windowHeight}))};var o=this._getClientSize();this.clientW=o.w,this.clientH=o.h}},{key:"_initNode",value:function(){this._getClientSize=function(){return{w:1920,h:1080}},this._getElementRect=function(t){return{top:t._top||0,bottom:(t._top||0)+(t._height||0),left:t._left||0,right:(t._left||0)+(t._width||0)}},this._setElementPosition=function(t,e,n){t._x=e,t._y=n,t.style=t.style||{},t.style.transform="translate3d(".concat(e,"px, ").concat(n,"px, 0)")},this._bindEvent=function(){},this._unbindEvent=function(){},this._bindDocEvent=function(){},this._unbindDocEvent=function(){},this._raf=function(t){t()},this._cancelRaf=function(){},this._storage={get:function(){return null},set:function(){},remove:function(){},getSession:function(){return null},setSession:function(){},removeSession:function(){}},this._onResize=function(){};var t=this._getClientSize();this.clientW=t.w,this.clientH=t.h}},{key:"_initRN",value:function(){var t=this;this._getClientSize=function(){try{var e=t.Dimensions.get("window");return{w:e.width,h:e.height}}catch(t){return{w:375,h:667}}},this._getElementRect=function(t){return new Promise((function(e){try{t&&t.measure?t.measure((function(t,n,i,o,s,r){e({top:r,bottom:r+o,left:s,right:s+i})})):e({top:0,bottom:0,left:0,right:0})}catch(t){e({top:0,bottom:0,left:0,right:0})}}))},this._setElementPosition=function(t,e,n){try{t&&t.setNativeProps&&t.setNativeProps({style:{left:e,top:n}})}catch(t){}},this._bindEvent=function(t,e){try{t&&t.attachRef&&t.attachRef("drageRef",e)}catch(t){}},this._unbindEvent=function(){},this._bindDocEvent=function(){},this._unbindDocEvent=function(){},this._raf=function(t){t()},this._cancelRaf=function(){},this._storage={get:function(t){try{return require("@react-native-async-storage/async-storage").getItem(t)}catch(t){return null}},set:function(t,e){try{require("@react-native-async-storage/async-storage").setItem(t,e)}catch(t){}},remove:function(t){try{require("@react-native-async-storage/async-storage").removeItem(t)}catch(t){}},getSession:function(t){try{return require("@react-native-async-storage/async-storage").getItem(t)}catch(t){return null}},setSession:function(t,e){try{require("@react-native-async-storage/async-storage").setItem(t,e)}catch(t){}},removeSession:function(t){try{require("@react-native-async-storage/async-storage").removeItem(t)}catch(t){}}},this._onResize=function(){try{t.Dimensions.addEventListener("change",(function(e){t.clientW=e.window.width,t.clientH=e.window.height}))}catch(t){}};var e=this._getClientSize();this.clientW=e.w,this.clientH=e.h}},{key:"_getStorage",value:function(t){var e=this._storage;return"local"===t?{get:e.get,set:e.set,remove:e.remove}:{get:e.getSession,set:e.setSession,remove:e.removeSession}}},{key:"storageHandle",value:function(t){if("get"===t){var e=this._getStorage(this.setStorage).get("DrageJS_INFO");try{if(!(e=JSON.parse(e)))return;this.currentX=e.currentX||0,this.initX=e.currentX||0,this.offsetX=e.currentX||0,this.currentY=e.currentY||0,this.initY=e.currentY||0,this.offsetY=e.currentY||0,this.setRef()}catch(t){}}"set"===t&&this._getStorage(this.setStorage).set("DrageJS_INFO",JSON.stringify({currentX:this.currentX,currentY:this.currentY}));if("remove"===t){var n=this._getStorage("local"),i=this._getStorage("session");n.remove("DrageJS_INFO"),i.remove("DrageJS_INFO")}}},{key:"resetPosition",value:function(){this.currentX=0,this.currentY=0,this.initX=0,this.initY=0,this.offsetX=0,this.offsetY=0,this.storageHandle("remove"),this.setRef()}},{key:"listen",value:function(t){var e=t.ref,n=t.style,i=void 0===n?{}:n,o=t.setStorage,s=void 0===o?"local":o,r=t.platform;switch(r&&r!==this.platform&&(this.platform=r,this._initAdapter()),this.ref=e,this.setStorage=s,i&&Object.keys(i).length>0&&(this.style=i),s&&"none"!==s&&this.storageHandle("get"),this.platform){case"browser":this._listenBrowser(e);break;case"weixin":this._listenWeixin(e);break;case"node":this._listenNode(e);break;case"rn":this._listenRN(e)}}},{key:"removeListen",value:function(t){switch(this.draggingFlag=!1,this.platform){case"browser":this._removeBrowser(t);break;case"weixin":this._removeWeixin(t);break;case"node":break;case"rn":this._removeRN(t)}if(this._onResize&&"undefined"!=typeof window&&window.removeEventListener&&window.removeEventListener("resize",this._onResize),"rn"===this.platform&&this._dimSubscription)try{this._dimSubscription.remove()}catch(t){}}},{key:"setRef",value:function(){if(this.ref){if("browser"===this.platform&&"string"!=typeof this.ref)for(var t in this.style)this.ref.style[t]=this.style[t];this._setElementPosition(this.ref,this.currentX,this.currentY)}}},{key:"_listenBrowser",value:function(t){var e=this;t&&(t.setAttribute("draggable",!1),this._onTouchStart=function(t){return e.onStart(t)},this._onMouseDown=function(t){return e.onStart(t)},this._onTouchEnd=function(t){return e.onEnd(t)},this._onMouseUp=function(t){return e.onEnd(t)},this._onTouchMove=function(t){return e.onMove(t)},this._onMouseMove=function(t){return e.onMove(t)},this._bindEvent(t,"touchstart",this._onTouchStart,{passive:!1}),this._bindEvent(t,"mousedown",this._onMouseDown,{passive:!1}),this._bindDocEvent("touchend",this._onTouchEnd),this._bindDocEvent("mouseup",this._onMouseUp))}},{key:"_removeBrowser",value:function(t){var e=t||this.ref||document;e&&(this._onTouchStart&&e.removeEventListener("touchstart",this._onTouchStart),this._onMouseDown&&e.removeEventListener("mousedown",this._onMouseDown),this._onTouchEnd&&document.removeEventListener("touchend",this._onTouchEnd),this._onMouseUp&&document.removeEventListener("mouseup",this._onMouseUp),this._onTouchMove&&document.removeEventListener("touchmove",this._onTouchMove),this._onMouseMove&&document.removeEventListener("mousemove",this._onMouseMove))}},{key:"_listenWeixin",value:function(t){var e=this;this._refSelector=t,this._handlers={touchstart:function(t){return e.onStart(t)},touchmove:function(t){return e.onMove(t)},touchend:function(t){return e.onEnd(t)}},this._wxBindEvents={onTouchstart:function(t){return e._handlers.touchstart(t)},onTouchmove:function(t){return e._handlers.touchmove(t)},onTouchend:function(t){return e._handlers.touchend(t)}}}},{key:"_removeWeixin",value:function(t){this._wxBindEvents=null,this._handlers=null}},{key:"_listenNode",value:function(t){t&&(t._top=t._top||0,t._left=t._left||0,t._width=t._width||100,t._height=t._height||100)}},{key:"_listenRN",value:function(t){this._rnRef=t}},{key:"_removeRN",value:function(t){this._rnRef=null}},{key:"onStart",value:function(t){var e,n;if(this.draggingFlag=!0,"browser"===this.platform){var i=t.touches?t.touches[0]:t.changedTouches?t.changedTouches[0]:t;e=i.clientX,n=i.clientY}else"weixin"===this.platform?(e=t.touches?t.touches[0].clientX:0,n=t.touches?t.touches[0].clientY:0):(e=t.clientX||0,n=t.clientY||0);this.initX=e-this.offsetX,this.initY=n-this.offsetY,"browser"===this.platform?(this._bindDocEvent("touchmove",this._onTouchMove,{passive:!1}),this._bindDocEvent("mousemove",this._onMouseMove,{passive:!1})):this.platform}},{key:"onMove",value:function(t){var e=this;if(this.draggingFlag&&t){var n,i;if("browser"===this.platform){var o=t.touches?t.touches[0]:t.changedTouches?t.changedTouches[0]:t;n=o.clientX,i=o.clientY}else"weixin"===this.platform?(n=t.touches?t.touches[0].clientX:0,i=t.touches?t.touches[0].clientY:0):(n=t.clientX||0,i=t.clientY||0);this.currentX=n-this.initX,this.currentY=i-this.initY;var s,r=this.currentX-this.offsetX,c=this.currentY-this.offsetY,u=s="browser"===this.platform?this._getElementRect(this.ref):"weixin"===this.platform?this._cachedRect||{top:0,bottom:0,left:0,right:0}:this._getElementRect(this.ref),h=u.top,a=u.bottom,f=u.left,l=u.right;f<=0?r<=0&&(this.offsetX-=f,this.currentX=this.offsetX):l>=this.clientW?r>=0&&(this.offsetX-=l-this.clientW,this.currentX=this.offsetX):this.offsetX=this.currentX,h<=0?c<=0&&(this.offsetY-=h,this.currentY=this.offsetY):a>=this.clientH?c>=0&&(this.offsetY-=a-this.clientH,this.currentY=this.offsetY):this.offsetY=this.currentY,"weixin"===this.platform&&(this._cachedRect=s),this._raf((function(){e.setRef()}))}}},{key:"onEnd",value:function(t){this.draggingFlag=!1,"browser"===this.platform&&(this._unbindDocEvent("touchmove",this._onTouchMove),this._unbindDocEvent("mousemove",this._onMouseMove)),this.storageHandle("set")}}])}());"undefined"!=typeof window&&null!==window&&(window.Drage=l);export{l as default};