@daybrush/drag - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

declaration/drag.d.ts

@@ -0,4 +1,3 @@
+import Dragger from "./Dragger";
 import { DragOptions } from "./types";
-export default function setDrag(el: Element, options: DragOptions): {
-    unset(): void;
-};
+export default function setDrag(el: Element, options: DragOptions): Dragger;

declaration/types.d.ts

 import { IObject } from "@daybrush/utils";
+export interface OnDragStart {
+    datas: IObject<any>;
+    clientX: number;
+    clientY: number;
+    inputEvent: any;
+}
+export interface OnDrag {
+    datas: IObject<any>;
+    distX: number;
+    distY: number;
+    deltaX: number;
+    deltaY: number;
+    clientX: number;
+    clientY: number;
+    inputEvent: any;
+}
+export interface OnDragEnd {
+    isDrag: boolean;
+    datas: IObject<any>;
+    inputEvent: any;
+    clientX: number;
+    clientY: number;
+    distX: number;
+    distY: number;
+}
 export interface DragOptions {
     container?: Window | Node | Element;
     events?: Array<"mouse" | "touch">;
-    dragstart?: (options: {
-        datas: IObject<any>;
-        clientX: number;
-        clientY: number;
-        inputEvent: any;
-    }) => any;
-    drag?: (options: {
-        datas: IObject<any>;
-        distX: number;
-        distY: number;
-        deltaX: number;
-        deltaY: number;
-        clientX: number;
-        clientY: number;
-        inputEvent: any;
-    }) => any;
-    dragend?: (options: {
-        isDrag: boolean;
-        datas: IObject<any>;
-        inputEvent: any;
-        clientX: number;
-        clientY: number;
-        distX: number;
-        distY: number;
-    }) => any;
+    preventRightClick?: boolean;
+    dragstart?: (options: OnDragStart) => any;
+    drag?: (options: OnDrag) => any;
+    dragend?: (options: OnDragEnd) => any;
 }

dist/drag.esm.js

@@ -7,123 +7,189 @@ /*
 repository: git+https://github.com/daybrush/drag.git
-version: 0.5.0
+version: 0.6.0
 */
-function setDrag(el, options) {
-  var flag = false;
-  var startX = 0;
-  var startY = 0;
-  var prevX = 0;
-  var prevY = 0;
-  var datas = {};
-  var isDrag = false;
-  var _a = options.container,
-      container = _a === void 0 ? el : _a,
-      dragstart = options.dragstart,
-      drag = options.drag,
-      dragend = options.dragend,
-      _b = options.events,
-      events = _b === void 0 ? ["touch", "mouse"] : _b;
-  var isTouch = events.indexOf("touch") > -1;
-  var isMouse = events.indexOf("mouse") > -1;
+/*! *****************************************************************************
+Copyright (c) Microsoft Corporation. All rights reserved.
+Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+this file except in compliance with the License. You may obtain a copy of the
+License at http://www.apache.org/licenses/LICENSE-2.0
 
-  function getPosition(e) {
-    return e.touches && e.touches.length ? e.touches[0] : e;
-  }
+THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+MERCHANTABLITY OR NON-INFRINGEMENT.
 
-  function onDragStart(e) {
-    flag = true;
-    isDrag = false;
+See the Apache Version 2.0 License for specific language governing permissions
+and limitations under the License.
+***************************************************************************** */
+var __assign = function () {
+  __assign = Object.assign || function __assign(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
 
-    var _a = getPosition(e),
-        clientX = _a.clientX,
-        clientY = _a.clientY;
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
 
-    startX = clientX;
-    startY = clientY;
-    prevX = clientX;
-    prevY = clientY;
-    datas = {};
-    (dragstart && dragstart({
-      datas: datas,
-      inputEvent: e,
-      clientX: clientX,
-      clientY: clientY
-    })) === false && (flag = false);
-    flag && e.preventDefault();
-  }
+    return t;
+  };
 
-  function onDrag(e) {
-    if (!flag) {
-      return;
-    }
+  return __assign.apply(this, arguments);
+};
 
-    var _a = getPosition(e),
-        clientX = _a.clientX,
-        clientY = _a.clientY;
+function getPosition(e) {
+  return e.touches && e.touches.length ? e.touches[0] : e;
+}
 
-    var deltaX = clientX - prevX;
-    var deltaY = clientY - prevY;
+var Dragger =
+/*#__PURE__*/
+function () {
+  function Dragger(el, options) {
+    var _this = this;
 
-    if (!deltaX && !deltaY) {
-      return;
+    if (options === void 0) {
+      options = {};
     }
 
-    isDrag = true;
-    drag && drag({
-      datas: datas,
-      clientX: clientX,
-      clientY: clientY,
-      deltaX: deltaX,
-      deltaY: deltaY,
-      distX: clientX - startX,
-      distY: clientY - startY,
-      inputEvent: e
-    });
-    prevX = clientX;
-    prevY = clientY;
-  }
+    this.el = el;
+    this.flag = false;
+    this.startX = 0;
+    this.startY = 0;
+    this.prevX = 0;
+    this.prevY = 0;
+    this.datas = {};
+    this.options = {};
+    this.isDrag = false;
+    this.isMouse = false;
+    this.isTouch = false;
 
-  function onDragEnd(e) {
-    if (!flag) {
-      return;
-    }
+    this.onDragStart = function (e) {
+      _this.flag = true;
+      _this.isDrag = false;
 
-    flag = false;
-    dragend && dragend({
-      datas: datas,
-      isDrag: isDrag,
-      inputEvent: e,
-      clientX: prevX,
-      clientY: prevY,
-      distX: prevX - startX,
-      distY: prevY - startY
-    });
-  }
+      var _a = getPosition(e),
+          clientX = _a.clientX,
+          clientY = _a.clientY;
 
-  if (isMouse) {
-    el.addEventListener("mousedown", onDragStart);
-    container.addEventListener("mousemove", onDrag);
-    container.addEventListener("mouseup", onDragEnd);
-  }
+      _this.startX = clientX;
+      _this.startY = clientY;
+      _this.prevX = clientX;
+      _this.prevY = clientY;
+      _this.datas = {};
+      var _b = _this.options,
+          dragstart = _b.dragstart,
+          preventRightClick = _b.preventRightClick;
 
-  if (isTouch) {
-    el.addEventListener("touchstart", onDragStart);
-    container.addEventListener("touchmove", onDrag);
-    container.addEventListener("touchend", onDragEnd);
-  }
+      if (preventRightClick && e.which === 3 || (dragstart && dragstart({
+        datas: _this.datas,
+        inputEvent: e,
+        clientX: clientX,
+        clientY: clientY
+      })) === false) {
+        _this.flag = false;
+      }
 
-  return {
-    unset: function () {
-      if (isMouse) {
-        el.removeEventListener("mousedown", onDragStart);
-        container.removeEventListener("mousemove", onDrag);
-        container.removeEventListener("mouseup", onDragEnd);
+      _this.flag && e.preventDefault();
+    };
+
+    this.onDrag = function (e) {
+      if (!_this.flag) {
+        return;
       }
 
-      if (isTouch) {
-        el.removeEventListener("touchstart", onDragStart);
-        container.removeEventListener("touchmove", onDrag);
-        container.removeEventListener("touchend", onDragEnd);
+      var _a = getPosition(e),
+          clientX = _a.clientX,
+          clientY = _a.clientY;
+
+      var deltaX = clientX - _this.prevX;
+      var deltaY = clientY - _this.prevY;
+
+      if (!deltaX && !deltaY) {
+        return;
       }
+
+      _this.isDrag = true;
+      var drag = _this.options.drag;
+      drag && drag({
+        datas: _this.datas,
+        clientX: clientX,
+        clientY: clientY,
+        deltaX: deltaX,
+        deltaY: deltaY,
+        distX: clientX - _this.startX,
+        distY: clientY - _this.startY,
+        inputEvent: e
+      });
+      _this.prevX = clientX;
+      _this.prevY = clientY;
+    };
+
+    this.onDragEnd = function (e) {
+      if (!_this.flag) {
+        return;
+      }
+
+      _this.flag = false;
+      var dragend = _this.options.dragend;
+      dragend && dragend({
+        datas: _this.datas,
+        isDrag: _this.isDrag,
+        inputEvent: e,
+        clientX: _this.prevX,
+        clientY: _this.prevY,
+        distX: _this.prevX - _this.startX,
+        distY: _this.prevY - _this.startY
+      });
+    };
+
+    this.options = __assign({
+      container: el,
+      preventRightClick: true,
+      events: ["touch", "mouse"]
+    }, options);
+    var _a = this.options,
+        container = _a.container,
+        events = _a.events;
+    this.isTouch = events.indexOf("touch") > -1;
+    this.isMouse = events.indexOf("mouse") > -1;
+
+    if (this.isMouse) {
+      el.addEventListener("mousedown", this.onDragStart);
+      container.addEventListener("mousemove", this.onDrag);
+      container.addEventListener("mouseup", this.onDragEnd);
     }
+
+    if (this.isTouch) {
+      el.addEventListener("touchstart", this.onDragStart);
+      container.addEventListener("touchmove", this.onDrag);
+      container.addEventListener("touchend", this.onDragEnd);
+    }
+  }
+
+  var __proto = Dragger.prototype;
+
+  __proto.isDragging = function () {
+    return this.isDrag;
   };
+
+  __proto.unset = function () {
+    var el = this.el;
+    var container = this.options.container;
+
+    if (this.isMouse) {
+      el.removeEventListener("mousedown", this.onDragStart);
+      container.removeEventListener("mousemove", this.onDrag);
+      container.removeEventListener("mouseup", this.onDragEnd);
+    }
+
+    if (this.isTouch) {
+      el.removeEventListener("touchstart", this.onDragStart);
+      container.removeEventListener("touchmove", this.onDrag);
+      container.removeEventListener("touchend", this.onDragEnd);
+    }
+  };
+
+  return Dragger;
+}();
+
+function setDrag(el, options) {
+  return new Dragger(el, options);
 }
@@ -130,0 +196,0 @@

dist/drag.js

@@ -7,3 +7,3 @@ /*
 repository: git+https://github.com/daybrush/drag.git
-version: 0.5.0
+version: 0.6.0
 */
@@ -16,121 +16,187 @@ (function (global, factory) {
 
-    function setDrag(el, options) {
-      var flag = false;
-      var startX = 0;
-      var startY = 0;
-      var prevX = 0;
-      var prevY = 0;
-      var datas = {};
-      var isDrag = false;
-      var _a = options.container,
-          container = _a === void 0 ? el : _a,
-          dragstart = options.dragstart,
-          drag = options.drag,
-          dragend = options.dragend,
-          _b = options.events,
-          events = _b === void 0 ? ["touch", "mouse"] : _b;
-      var isTouch = events.indexOf("touch") > -1;
-      var isMouse = events.indexOf("mouse") > -1;
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation. All rights reserved.
+    Licensed under the Apache License, Version 2.0 (the "License"); you may not use
+    this file except in compliance with the License. You may obtain a copy of the
+    License at http://www.apache.org/licenses/LICENSE-2.0
 
-      function getPosition(e) {
-        return e.touches && e.touches.length ? e.touches[0] : e;
-      }
+    THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+    KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
+    WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
+    MERCHANTABLITY OR NON-INFRINGEMENT.
 
-      function onDragStart(e) {
-        flag = true;
-        isDrag = false;
+    See the Apache Version 2.0 License for specific language governing permissions
+    and limitations under the License.
+    ***************************************************************************** */
+    var __assign = function () {
+      __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+          s = arguments[i];
 
-        var _a = getPosition(e),
-            clientX = _a.clientX,
-            clientY = _a.clientY;
+          for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
 
-        startX = clientX;
-        startY = clientY;
-        prevX = clientX;
-        prevY = clientY;
-        datas = {};
-        (dragstart && dragstart({
-          datas: datas,
-          inputEvent: e,
-          clientX: clientX,
-          clientY: clientY
-        })) === false && (flag = false);
-        flag && e.preventDefault();
-      }
+        return t;
+      };
 
-      function onDrag(e) {
-        if (!flag) {
-          return;
-        }
+      return __assign.apply(this, arguments);
+    };
 
-        var _a = getPosition(e),
-            clientX = _a.clientX,
-            clientY = _a.clientY;
+    function getPosition(e) {
+      return e.touches && e.touches.length ? e.touches[0] : e;
+    }
 
-        var deltaX = clientX - prevX;
-        var deltaY = clientY - prevY;
+    var Dragger =
+    /*#__PURE__*/
+    function () {
+      function Dragger(el, options) {
+        var _this = this;
 
-        if (!deltaX && !deltaY) {
-          return;
+        if (options === void 0) {
+          options = {};
         }
 
-        isDrag = true;
-        drag && drag({
-          datas: datas,
-          clientX: clientX,
-          clientY: clientY,
-          deltaX: deltaX,
-          deltaY: deltaY,
-          distX: clientX - startX,
-          distY: clientY - startY,
-          inputEvent: e
-        });
-        prevX = clientX;
-        prevY = clientY;
-      }
+        this.el = el;
+        this.flag = false;
+        this.startX = 0;
+        this.startY = 0;
+        this.prevX = 0;
+        this.prevY = 0;
+        this.datas = {};
+        this.options = {};
+        this.isDrag = false;
+        this.isMouse = false;
+        this.isTouch = false;
 
-      function onDragEnd(e) {
-        if (!flag) {
-          return;
-        }
+        this.onDragStart = function (e) {
+          _this.flag = true;
+          _this.isDrag = false;
 
-        flag = false;
-        dragend && dragend({
-          datas: datas,
-          isDrag: isDrag,
-          inputEvent: e,
-          clientX: prevX,
-          clientY: prevY,
-          distX: prevX - startX,
-          distY: prevY - startY
-        });
-      }
+          var _a = getPosition(e),
+              clientX = _a.clientX,
+              clientY = _a.clientY;
 
-      if (isMouse) {
-        el.addEventListener("mousedown", onDragStart);
-        container.addEventListener("mousemove", onDrag);
-        container.addEventListener("mouseup", onDragEnd);
-      }
+          _this.startX = clientX;
+          _this.startY = clientY;
+          _this.prevX = clientX;
+          _this.prevY = clientY;
+          _this.datas = {};
+          var _b = _this.options,
+              dragstart = _b.dragstart,
+              preventRightClick = _b.preventRightClick;
 
-      if (isTouch) {
-        el.addEventListener("touchstart", onDragStart);
-        container.addEventListener("touchmove", onDrag);
-        container.addEventListener("touchend", onDragEnd);
-      }
+          if (preventRightClick && e.which === 3 || (dragstart && dragstart({
+            datas: _this.datas,
+            inputEvent: e,
+            clientX: clientX,
+            clientY: clientY
+          })) === false) {
+            _this.flag = false;
+          }
 
-      return {
-        unset: function () {
-          if (isMouse) {
-            el.removeEventListener("mousedown", onDragStart);
-            container.removeEventListener("mousemove", onDrag);
-            container.removeEventListener("mouseup", onDragEnd);
+          _this.flag && e.preventDefault();
+        };
+
+        this.onDrag = function (e) {
+          if (!_this.flag) {
+            return;
           }
 
-          if (isTouch) {
-            el.removeEventListener("touchstart", onDragStart);
-            container.removeEventListener("touchmove", onDrag);
-            container.removeEventListener("touchend", onDragEnd);
+          var _a = getPosition(e),
+              clientX = _a.clientX,
+              clientY = _a.clientY;
+
+          var deltaX = clientX - _this.prevX;
+          var deltaY = clientY - _this.prevY;
+
+          if (!deltaX && !deltaY) {
+            return;
           }
+
+          _this.isDrag = true;
+          var drag = _this.options.drag;
+          drag && drag({
+            datas: _this.datas,
+            clientX: clientX,
+            clientY: clientY,
+            deltaX: deltaX,
+            deltaY: deltaY,
+            distX: clientX - _this.startX,
+            distY: clientY - _this.startY,
+            inputEvent: e
+          });
+          _this.prevX = clientX;
+          _this.prevY = clientY;
+        };
+
+        this.onDragEnd = function (e) {
+          if (!_this.flag) {
+            return;
+          }
+
+          _this.flag = false;
+          var dragend = _this.options.dragend;
+          dragend && dragend({
+            datas: _this.datas,
+            isDrag: _this.isDrag,
+            inputEvent: e,
+            clientX: _this.prevX,
+            clientY: _this.prevY,
+            distX: _this.prevX - _this.startX,
+            distY: _this.prevY - _this.startY
+          });
+        };
+
+        this.options = __assign({
+          container: el,
+          preventRightClick: true,
+          events: ["touch", "mouse"]
+        }, options);
+        var _a = this.options,
+            container = _a.container,
+            events = _a.events;
+        this.isTouch = events.indexOf("touch") > -1;
+        this.isMouse = events.indexOf("mouse") > -1;
+
+        if (this.isMouse) {
+          el.addEventListener("mousedown", this.onDragStart);
+          container.addEventListener("mousemove", this.onDrag);
+          container.addEventListener("mouseup", this.onDragEnd);
         }
+
+        if (this.isTouch) {
+          el.addEventListener("touchstart", this.onDragStart);
+          container.addEventListener("touchmove", this.onDrag);
+          container.addEventListener("touchend", this.onDragEnd);
+        }
+      }
+
+      var __proto = Dragger.prototype;
+
+      __proto.isDragging = function () {
+        return this.isDrag;
       };
+
+      __proto.unset = function () {
+        var el = this.el;
+        var container = this.options.container;
+
+        if (this.isMouse) {
+          el.removeEventListener("mousedown", this.onDragStart);
+          container.removeEventListener("mousemove", this.onDrag);
+          container.removeEventListener("mouseup", this.onDragEnd);
+        }
+
+        if (this.isTouch) {
+          el.removeEventListener("touchstart", this.onDragStart);
+          container.removeEventListener("touchmove", this.onDrag);
+          container.removeEventListener("touchend", this.onDragEnd);
+        }
+      };
+
+      return Dragger;
+    }();
+
+    function setDrag(el, options) {
+      return new Dragger(el, options);
     }
@@ -137,0 +203,0 @@

dist/drag.min.js

@@ -7,5 +7,5 @@ /*
 repository: git+https://github.com/daybrush/drag.git
-version: 0.5.0
+version: 0.6.0
 */
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports):"function"==typeof define&&define.amd?define(["exports"],t):t((e=e||self).utils={})}(this,function(e){"use strict";e.drag=function(e,t){var d=!1,u=0,r=0,c=0,v=0,a={},f=!1,n=t.container,i=void 0===n?e:n,o=t.dragstart,m=t.drag,s=t.dragend,l=t.events,E=void 0===l?["touch","mouse"]:l,h=-1<E.indexOf("touch"),p=-1<E.indexOf("mouse");function L(e){return e.touches&&e.touches.length?e.touches[0]:e}function X(e){f=!(d=!0);var t=L(e),n=t.clientX,i=t.clientY;c=u=n,v=r=i,!(a={})===(o&&o({datas:a,inputEvent:e,clientX:n,clientY:i}))&&(d=!1),d&&e.preventDefault()}function Y(e){if(d){var t=L(e),n=t.clientX,i=t.clientY,o=n-c,s=i-v;(o||s)&&(f=!0,m&&m({datas:a,clientX:n,clientY:i,deltaX:o,deltaY:s,distX:n-u,distY:i-r,inputEvent:e}),c=n,v=i)}}function g(e){d&&(d=!1,s&&s({datas:a,isDrag:f,inputEvent:e,clientX:c,clientY:v,distX:c-u,distY:v-r}))}return p&&(e.addEventListener("mousedown",X),i.addEventListener("mousemove",Y),i.addEventListener("mouseup",g)),h&&(e.addEventListener("touchstart",X),i.addEventListener("touchmove",Y),i.addEventListener("touchend",g)),{unset:function(){p&&(e.removeEventListener("mousedown",X),i.removeEventListener("mousemove",Y),i.removeEventListener("mouseup",g)),h&&(e.removeEventListener("touchstart",X),i.removeEventListener("touchmove",Y),i.removeEventListener("touchend",g))}}}});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).utils={})}(this,function(t){"use strict";var r=function(){return(r=Object.assign||function(t){for(var e,n=1,i=arguments.length;n<i;n++)for(var s in e=arguments[n])Object.prototype.hasOwnProperty.call(e,s)&&(t[s]=e[s]);return t}).apply(this,arguments)};function h(t){return t.touches&&t.touches.length?t.touches[0]:t}var n=function(){function t(t,e){var a=this;void 0===e&&(e={}),this.el=t,this.flag=!1,this.startX=0,this.startY=0,this.prevX=0,this.prevY=0,this.datas={},this.options={},this.isDrag=!1,this.isMouse=!1,this.isTouch=!1,this.onDragStart=function(t){a.flag=!0,a.isDrag=!1;var e=h(t),n=e.clientX,i=e.clientY;a.startX=n,a.startY=i,a.prevX=n,a.prevY=i,a.datas={};var s=a.options,r=s.dragstart;(s.preventRightClick&&3===t.which||!1===(r&&r({datas:a.datas,inputEvent:t,clientX:n,clientY:i})))&&(a.flag=!1),a.flag&&t.preventDefault()},this.onDrag=function(t){if(a.flag){var e=h(t),n=e.clientX,i=e.clientY,s=n-a.prevX,r=i-a.prevY;if(s||r){a.isDrag=!0;var o=a.options.drag;o&&o({datas:a.datas,clientX:n,clientY:i,deltaX:s,deltaY:r,distX:n-a.startX,distY:i-a.startY,inputEvent:t}),a.prevX=n,a.prevY=i}}},this.onDragEnd=function(t){if(a.flag){a.flag=!1;var e=a.options.dragend;e&&e({datas:a.datas,isDrag:a.isDrag,inputEvent:t,clientX:a.prevX,clientY:a.prevY,distX:a.prevX-a.startX,distY:a.prevY-a.startY})}},this.options=r({container:t,preventRightClick:!0,events:["touch","mouse"]},e);var n=this.options,i=n.container,s=n.events;this.isTouch=-1<s.indexOf("touch"),this.isMouse=-1<s.indexOf("mouse"),this.isMouse&&(t.addEventListener("mousedown",this.onDragStart),i.addEventListener("mousemove",this.onDrag),i.addEventListener("mouseup",this.onDragEnd)),this.isTouch&&(t.addEventListener("touchstart",this.onDragStart),i.addEventListener("touchmove",this.onDrag),i.addEventListener("touchend",this.onDragEnd))}var e=t.prototype;return e.isDragging=function(){return this.isDrag},e.unset=function(){var t=this.el,e=this.options.container;this.isMouse&&(t.removeEventListener("mousedown",this.onDragStart),e.removeEventListener("mousemove",this.onDrag),e.removeEventListener("mouseup",this.onDragEnd)),this.isTouch&&(t.removeEventListener("touchstart",this.onDragStart),e.removeEventListener("touchmove",this.onDrag),e.removeEventListener("touchend",this.onDragEnd))},t}();t.drag=function(t,e){return new n(t,e)}});
 //# sourceMappingURL=drag.min.js.map

package.json

 {
   "name": "@daybrush/drag",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "You can set up drag events in any browser.",
@@ -16,7 +16,7 @@ "main": "./dist/drag.js",
   "keywords": [
-      "drag",
-      "dom",
-      "daybrush",
-      "touch",
-      "mouse"
+    "drag",
+    "dom",
+    "daybrush",
+    "touch",
+    "mouse"
   ],
@@ -38,3 +38,6 @@ "repository": {
     "typescript": "^3.4.2"
+  },
+  "dependencies": {
+    "@daybrush/utils": "^0.10.0"
   }
 }

src/drag.ts

@@ -0,103 +1,6 @@
+import Dragger from "./Dragger";
 import { DragOptions } from "./types";
 
 export default function setDrag(el: Element, options: DragOptions) {
-    let flag = false;
-    let startX = 0;
-    let startY = 0;
-    let prevX = 0;
-    let prevY = 0;
-    let datas = {};
-    let isDrag = false;
-
-    const { container = el, dragstart, drag, dragend, events = ["touch", "mouse"] } = options;
-    const isTouch = events.indexOf("touch") > -1;
-    const isMouse = events.indexOf("mouse") > -1;
-
-    function getPosition(e) {
-        return e.touches && e.touches.length ? e.touches[0] : e;
-    }
-
-    function onDragStart(e) {
-        flag = true;
-        isDrag = false;
-        const { clientX, clientY } = getPosition(e);
-
-        startX = clientX;
-        startY = clientY;
-        prevX = clientX;
-        prevY = clientY;
-        datas = {};
-        ((dragstart && dragstart({ datas, inputEvent: e, clientX, clientY })) === false) && (flag = false);
-
-        flag && e.preventDefault();
-    }
-    function onDrag(e) {
-        if (!flag) {
-            return;
-        }
-
-        const { clientX, clientY } = getPosition(e);
-        const deltaX = clientX - prevX;
-        const deltaY = clientY - prevY;
-
-        if (!deltaX && !deltaY) {
-            return;
-        }
-        isDrag = true;
-        drag && drag({
-            datas,
-            clientX,
-            clientY,
-            deltaX,
-            deltaY,
-            distX: clientX - startX,
-            distY: clientY - startY,
-            inputEvent: e,
-        });
-
-        prevX = clientX;
-        prevY = clientY;
-    }
-    function onDragEnd(e) {
-        if (!flag) {
-            return;
-        }
-        flag = false;
-
-        dragend && dragend({
-            datas,
-            isDrag,
-            inputEvent: e,
-            clientX: prevX,
-            clientY: prevY,
-            distX: prevX - startX,
-            distY: prevY - startY,
-        });
-    }
-
-    if (isMouse) {
-        el.addEventListener("mousedown", onDragStart);
-        container.addEventListener("mousemove", onDrag);
-        container.addEventListener("mouseup", onDragEnd);
-    }
-    if (isTouch) {
-        el.addEventListener("touchstart", onDragStart);
-        container.addEventListener("touchmove", onDrag);
-        container.addEventListener("touchend", onDragEnd);
-    }
-
-    return {
-        unset() {
-            if (isMouse) {
-                el.removeEventListener("mousedown", onDragStart);
-                container.removeEventListener("mousemove", onDrag);
-                container.removeEventListener("mouseup", onDragEnd);
-            }
-            if (isTouch) {
-                el.removeEventListener("touchstart", onDragStart);
-                container.removeEventListener("touchmove", onDrag);
-                container.removeEventListener("touchend", onDragEnd);
-            }
-        },
-    };
+    return new Dragger(el, options);
 }

src/types.ts

 import { IObject } from "@daybrush/utils";
 
+export interface OnDragStart {
+    datas: IObject<any>;
+    clientX: number;
+    clientY: number;
+    inputEvent: any;
+}
+export interface OnDrag {
+    datas: IObject<any>;
+    distX: number;
+    distY: number;
+    deltaX: number;
+    deltaY: number;
+    clientX: number;
+    clientY: number;
+    inputEvent: any;
+}
+export interface OnDragEnd {
+    isDrag: boolean;
+    datas: IObject<any>;
+    inputEvent: any;
+    clientX: number;
+    clientY: number;
+    distX: number;
+    distY: number;
+}
 export interface DragOptions {
     container?: Window | Node | Element;
     events?: Array<"mouse" | "touch">;
-    dragstart?: (options: {
-        datas: IObject<any>,
-        clientX: number,
-        clientY: number,
-        inputEvent: any,
-    }) => any;
-    drag?: (options: {
-        datas: IObject<any>,
-        distX: number,
-        distY: number,
-        deltaX: number,
-        deltaY: number,
-        clientX: number,
-        clientY: number,
-        inputEvent: any,
-    }) => any;
-    dragend?: (options: {
-        isDrag: boolean,
-        datas: IObject<any>,
-        inputEvent: any,
-        clientX: number,
-        clientY: number,
-        distX: number,
-        distY: number,
-    }) => any;
+    preventRightClick?: boolean;
+    dragstart?: (options: OnDragStart) => any;
+    drag?: (options: OnDrag) => any;
+    dragend?: (options: OnDragEnd) => any;
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

50341

increased by38.8%

Number of package files

22

increased by10%

Lines of code

682

increased by31.91%

Worsened metrics

Dependency count

1

increased byInfinity%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@daybrush/utils@^0.10.0

• + Added@daybrush/utils@0.10.5(transitive)