UNPKG

@skillnull/drage-js

Version:

拖拽元素到页面任意位置

1 lines 6.4 kB
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Drage=t()}(this,(function(){"use strict";function e(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var t={exports:{}};!function(e){function t(n){return e.exports=t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},e.exports.__esModule=!0,e.exports.default=e.exports,t(n)}e.exports=t,e.exports.__esModule=!0,e.exports.default=e.exports}(t);var n=t.exports,o=e(n),r={exports:{}};!function(e){e.exports=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},e.exports.__esModule=!0,e.exports.default=e.exports}(r);var i=e(r.exports),s={exports:{}},u={exports:{}},a={exports:{}};!function(e){var t=n.default;e.exports=function(e,n){if("object"!=t(e)||!e)return e;var o=e[Symbol.toPrimitive];if(void 0!==o){var r=o.call(e,n||"default");if("object"!=t(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)},e.exports.__esModule=!0,e.exports.default=e.exports}(a);var c=a.exports;!function(e){var t=n.default,o=c;e.exports=function(e){var n=o(e,"string");return"symbol"==t(n)?n:n+""},e.exports.__esModule=!0,e.exports.default=e.exports}(u);var f=u.exports;!function(e){var t=f;function n(e,n){for(var o=0;o<n.length;o++){var r=n[o];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,t(r.key),r)}}e.exports=function(e,t,o){return t&&n(e.prototype,t),o&&n(e,o),Object.defineProperty(e,"prototype",{writable:!1}),e},e.exports.__esModule=!0,e.exports.default=e.exports}(s);var d=e(s.exports),l=new(function(){return d((function e(){i(this,e),this.ref,this.draggingFlag=!1,this.initX,this.initY,this.currentX,this.currentY,this.offsetX=0,this.offsetY=0,this.pageX,this.pageY,this.style={position:"fixed",zIndex:"999999"},this.setStorage,this.animationFrame,this.clientW=document.documentElement.clientWidth||document.body.clientWidth||window.innerWidth,this.clientH=document.documentElement.clientHeight||document.body.clientHeight||window.innerHeight}),[{key:"listen",value:function(e){var t=this,n=e.ref,o=e.style,r=void 0===o?{}:o,i=e.setStorage,s=void 0===i?"local":i;window.onresize=function(){t.storageHandle("remove"),t.clientW=document.documentElement.clientWidth||document.body.clientWidth||window.innerWidth,t.clientH=document.documentElement.clientHeight||document.body.clientHeight||window.innerHeight},this.ref=n,r&&(this.style=r),s&&(this.setStorage=s,this.storageHandle("get")),this.ref&&this.ref.setAttribute("draggable",!1),this.ref&&this.ref.addEventListener("touchstart",(function(e){return t.onStart(e,t)}),{passive:!1}),this.ref&&this.ref.addEventListener("mousedown",(function(e){return t.onStart(e,t)}),{passive:!1}),document.addEventListener("touchend",(function(e){return t.onEnd(e,t)})),document.addEventListener("mouseup",(function(e){return t.onEnd(e,t)}))}},{key:"storageHandle",value:function(e){if("get"===e){var t;"local"===this.setStorage&&(t=localStorage.getItem("DrageJS_INFO")),"session"===this.setStorage&&(t=sessionStorage.getItem("DrageJS_INFO"));try{if(!(t=JSON.parse(t)))return;this.currentX=t.currentX,this.initX=t.currentX,this.offsetX=t.currentX,this.currentY=t.currentY,this.initY=t.currentY,this.offsetY=t.currentY,this.setRef()}catch(e){console.log(e)}}"set"===e&&("local"===this.setStorage&&localStorage.setItem("DrageJS_INFO",JSON.stringify({currentX:this.currentX,currentY:this.currentY})),"session"===this.setStorage&&sessionStorage.setItem("DrageJS_INFO",JSON.stringify({currentX:this.currentX,currentY:this.currentY}))),"remove"===e&&(localStorage.removeItem("DrageJS_INFO"),sessionStorage.removeItem("DrageJS_INFO"))}},{key:"setRef",value:function(){if(this.ref){for(var e in this.style)this.ref.style[e]=this.style[e];this.ref.style.transform="translate3d(".concat(this.currentX,"px, ").concat(this.currentY,"px, 0)")}}},{key:"onStart",value:function(e,t){e.preventDefault(),t.draggingFlag=!0;var n="mousedown"===e.type?e:e.changedTouches&&e.changedTouches[0];t.initX=n.clientX-t.offsetX,t.initY=n.clientY-t.offsetY,t.pageX=n.pageX,t.pageY=n.pageY,document.addEventListener("touchmove",(function(e){return t.onMove(e,t)}),{passive:!1}),document.addEventListener("mousemove",(function(e){return t.onMove(e,t)}),{passive:!1})}},{key:"onMove",value:function(e,t){if(t.draggingFlag&&e){e.preventDefault();var n="mousemove"===e.type?e:e.changedTouches&&e.changedTouches[0];t.animationFrame&&cancelAnimationFrame(this.animationFrame),t.animationFrame=requestAnimationFrame((function(){var e=t.ref.getBoundingClientRect(),o=e.top,r=e.bottom,i=e.left,s=e.right;t.currentX=n.clientX-t.initX,t.currentY=n.clientY-t.initY;var u=t.currentX-t.offsetX,a=t.currentY-t.offsetY;i<=0?u<=0&&(t.offsetX-=i,t.currentX=t.offsetX):s>=t.clientW?u>=0&&(t.currentX=t.offsetX):t.offsetX=t.currentX,o<=0?a<=0&&(t.offsetY-=o,t.currentY=t.offsetY):r>=t.clientH?a>=0&&(t.currentY=t.offsetY):t.offsetY=t.currentY,t.setRef()}))}}},{key:"onEnd",value:function(e,t){t.draggingFlag=!1,document.removeEventListener("touchmove",(function(e){return t.onMove(e,t)})),document.removeEventListener("mousemove",(function(e){return t.onMove(e,t)})),t.storageHandle("set")}},{key:"removeListen",value:function(e){var t=this,n=e||(this.ref||document);n&&(n.removeEventListener("touchmove",(function(e){return t.onMove(e,t)})),n.removeEventListener("mousemove",(function(e){return t.onMove(e,t)})),n.removeEventListener("touchstart",(function(e){return t.onStart(e,t)})),n.removeEventListener("mousedown",(function(e){return t.onStart(e,t)})),n.removeEventListener("touchend",(function(e){return t.onEnd(e,t)})),n.removeEventListener("mouseup",(function(e){return t.onEnd(e,t)})),n.removeEventListener("mouseout",(function(e){return t.onEnd(e,t)})))}}])}());if("undefined"==typeof window||null===("undefined"==typeof window?"undefined":o(window))){var m,h=new(0,require("jsdom").JSDOM)("");window=null==h?void 0:h.window,document=null==h||null===(m=h.window)||void 0===m?void 0:m.document,globalThis.window=window,globalThis.document=document}return window.Drage=l,l}));