@daybrush/drag - npm Package Compare versions

Comparing version 0.17.0 to 0.18.0

declaration/Dragger.d.ts

@@ -27,3 +27,3 @@ import { DragOptions, Client, OnDrag } from "./types";
     scrollBy(deltaX: number, deltaY: number, e: any, isCallDrag?: boolean): void;
-    onDragStart: (e: any) => void;
+    onDragStart: (e: any) => false | undefined;
     onDrag: (e: any, isScroll?: boolean | undefined) => void;
@@ -36,3 +36,4 @@ move([deltaX, deltaY]: number[], inputEvent: any, clients?: Client[]): OnDrag | undefined;
     unset(): void;
+    private initDrag;
 }
 export default Dragger;

declaration/types.d.ts

@@ -66,2 +66,3 @@ import { IObject } from "@daybrush/utils";
     pinchOutside?: boolean;
+    checkInput?: boolean;
     dragstart?: (options: OnDragStart) => any;
@@ -68,0 +69,0 @@ drag?: (options: OnDrag) => any;

dist/drag.cjs.js

@@ -7,3 +7,3 @@ /*
 repository: git+https://github.com/daybrush/drag.git
-version: 0.17.0
+version: 0.18.0
 */
@@ -136,2 +136,3 @@ 'use strict';
 
+var INPUT_TAGNAMES = ["textarea", "input"];
 /**
@@ -186,5 +187,15 @@ * You can set up drag events in any browser.
           preventRightClick = _a.preventRightClick,
-          preventDefault = _a.preventDefault;
+          preventDefault = _a.preventDefault,
+          checkInput = _a.checkInput;
       var isTouch = _this.isTouch;
 
+      if (!_this.flag && checkInput) {
+        var target = e.target;
+        var tagName = target.tagName.toLowerCase();
+
+        if (INPUT_TAGNAMES.indexOf(tagName) > -1 || target.isContentEditable) {
+          return false;
+        }
+      }
+
       if (!_this.flag && isTouch && pinchOutside) {
@@ -224,10 +235,16 @@ setTimeout(function () {
 
-      if (preventRightClick && (e.which === 3 || e.button === 2) || (dragstart && dragstart(__assign({
+      if (preventRightClick && (e.which === 3 || e.button === 2)) {
+        _this.initDrag();
+
+        return false;
+      }
+
+      var result = dragstart && dragstart(__assign({
         type: "dragstart",
         datas: _this.datas,
         inputEvent: e
-      }, position))) === false) {
-        _this.startClients = [];
-        _this.prevClients = [];
-        _this.flag = false;
+      }, position));
+
+      if (result === false) {
+        _this.initDrag();
       }
@@ -301,2 +318,3 @@
     this.options = __assign({
+      checkInput: true,
       container: elements.length > 1 ? window : elements[0],
@@ -560,2 +578,8 @@ preventRightClick: true,
 
+  __proto.initDrag = function () {
+    this.startClients = [];
+    this.prevClients = [];
+    this.flag = false;
+  };
+
   return Dragger;
@@ -562,0 +586,0 @@ }();

dist/drag.esm.js

@@ -7,3 +7,3 @@ /*
 repository: git+https://github.com/daybrush/drag.git
-version: 0.17.0
+version: 0.18.0
 */
@@ -134,2 +134,3 @@ import { removeEvent, addEvent, now } from '@daybrush/utils';
 
+var INPUT_TAGNAMES = ["textarea", "input"];
 /**
@@ -184,5 +185,15 @@ * You can set up drag events in any browser.
           preventRightClick = _a.preventRightClick,
-          preventDefault = _a.preventDefault;
+          preventDefault = _a.preventDefault,
+          checkInput = _a.checkInput;
       var isTouch = _this.isTouch;
 
+      if (!_this.flag && checkInput) {
+        var target = e.target;
+        var tagName = target.tagName.toLowerCase();
+
+        if (INPUT_TAGNAMES.indexOf(tagName) > -1 || target.isContentEditable) {
+          return false;
+        }
+      }
+
       if (!_this.flag && isTouch && pinchOutside) {
@@ -222,10 +233,16 @@ setTimeout(function () {
 
-      if (preventRightClick && (e.which === 3 || e.button === 2) || (dragstart && dragstart(__assign({
+      if (preventRightClick && (e.which === 3 || e.button === 2)) {
+        _this.initDrag();
+
+        return false;
+      }
+
+      var result = dragstart && dragstart(__assign({
         type: "dragstart",
         datas: _this.datas,
         inputEvent: e
-      }, position))) === false) {
-        _this.startClients = [];
-        _this.prevClients = [];
-        _this.flag = false;
+      }, position));
+
+      if (result === false) {
+        _this.initDrag();
       }
@@ -299,2 +316,3 @@
     this.options = __assign({
+      checkInput: true,
       container: elements.length > 1 ? window : elements[0],
@@ -558,2 +576,8 @@ preventRightClick: true,
 
+  __proto.initDrag = function () {
+    this.startClients = [];
+    this.prevClients = [];
+    this.flag = false;
+  };
+
   return Dragger;
@@ -560,0 +584,0 @@ }();

dist/drag.js

@@ -7,3 +7,3 @@ /*
 repository: git+https://github.com/daybrush/drag.git
-version: 0.17.0
+version: 0.18.0
 */
@@ -196,2 +196,3 @@ (function (global, factory) {
 
+    var INPUT_TAGNAMES = ["textarea", "input"];
     /**
@@ -246,5 +247,15 @@ * You can set up drag events in any browser.
               preventRightClick = _a.preventRightClick,
-              preventDefault = _a.preventDefault;
+              preventDefault = _a.preventDefault,
+              checkInput = _a.checkInput;
           var isTouch = _this.isTouch;
 
+          if (!_this.flag && checkInput) {
+            var target = e.target;
+            var tagName = target.tagName.toLowerCase();
+
+            if (INPUT_TAGNAMES.indexOf(tagName) > -1 || target.isContentEditable) {
+              return false;
+            }
+          }
+
           if (!_this.flag && isTouch && pinchOutside) {
@@ -284,10 +295,16 @@ setTimeout(function () {
 
-          if (preventRightClick && (e.which === 3 || e.button === 2) || (dragstart && dragstart(__assign({
+          if (preventRightClick && (e.which === 3 || e.button === 2)) {
+            _this.initDrag();
+
+            return false;
+          }
+
+          var result = dragstart && dragstart(__assign({
             type: "dragstart",
             datas: _this.datas,
             inputEvent: e
-          }, position))) === false) {
-            _this.startClients = [];
-            _this.prevClients = [];
-            _this.flag = false;
+          }, position));
+
+          if (result === false) {
+            _this.initDrag();
           }
@@ -361,2 +378,3 @@
         this.options = __assign({
+          checkInput: true,
           container: elements.length > 1 ? window : elements[0],
@@ -620,2 +638,8 @@ preventRightClick: true,
 
+      __proto.initDrag = function () {
+        this.startClients = [];
+        this.prevClients = [];
+        this.flag = false;
+      };
+
       return Dragger;
@@ -622,0 +646,0 @@ }();

dist/drag.min.js

@@ -7,5 +7,5 @@ /*
 repository: git+https://github.com/daybrush/drag.git
-version: 0.17.0
+version: 0.18.0
 */
-!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t=t||self).Dragger=i()}(this,function(){"use strict";var u=function(){return(u=Object.assign||function(t){for(var i,n=1,s=arguments.length;n<s;n++)for(var e in i=arguments[n])Object.prototype.hasOwnProperty.call(i,e)&&(t[e]=i[e]);return t}).apply(this,arguments)};function l(t){return function(t,i){var n=i[0]-t[0],s=i[1]-t[1],e=Math.atan2(s,n);return 0<=e?e:e+2*Math.PI}([t[0].clientX,t[0].clientY],[t[1].clientX,t[1].clientY])/Math.PI*180}function f(t,i,n,s){var e=m(t),a=m(i),r=m(s);return p(h(s[0],o(e,r)),h(s[0],o(a,r)),n[0])}function g(t){return t.touches?D(t.touches):[e(t)]}function p(t,i,n){var s=t.clientX,e=t.clientY;return{clientX:s,clientY:e,deltaX:s-i.clientX,deltaY:e-i.clientY,distX:s-n.clientX,distY:e-n.clientY}}function v(t){return Math.sqrt(Math.pow(t[0].clientX-t[1].clientX,2)+Math.pow(t[0].clientY-t[1].clientY,2))}function d(t,n,s){return t.map(function(t,i){return p(t,n[i],s[i])})}function D(t){for(var i=Math.min(t.length,2),n=[],s=0;s<i;++s)n.push(e(t[s]));return n}function e(t){return{clientX:t.clientX,clientY:t.clientY}}function m(t){return 1===t.length?t[0]:{clientX:(t[0].clientX+t[1].clientX)/2,clientY:(t[0].clientY+t[1].clientY)/2}}function h(t,i){return{clientX:t.clientX+i.clientX,clientY:t.clientY+i.clientY}}function o(t,i){return{clientX:t.clientX-i.clientX,clientY:t.clientY-i.clientY}}function C(){return Date.now?Date.now():(new Date).getTime()}function X(t,i,n,s){t.addEventListener(i,n,s)}function Y(t,i,n){t.removeEventListener(i,n)}var n=function(){function t(t,i){var l=this;void 0===i&&(i={}),this.options={},this.flag=!1,this.pinchFlag=!1,this.datas={},this.isDrag=!1,this.isPinch=!1,this.isMouse=!1,this.isTouch=!1,this.prevClients=[],this.startClients=[],this.movement=0,this.startPinchClients=[],this.startDistance=0,this.customDist=[0,0],this.targets=[],this.prevTime=0,this.isDouble=!1,this.startRotate=0,this.onDragStart=function(t){if(l.flag||!1!==t.cancelable){var i=l.options,n=i.container,s=i.pinchOutside,e=i.dragstart,a=i.preventRightClick,r=i.preventDefault,h=l.isTouch;if(!l.flag&&h&&s&&setTimeout(function(){X(n,"touchstart",l.onDragStart)}),l.flag&&h&&s&&Y(n,"touchstart",l.onDragStart),function(t){return t.touches&&2<=t.touches.length}(t)){if(!l.flag&&t.touches.length!==t.changedTouches.length)return;l.pinchFlag||l.onPinchStart(t)}if(!l.flag){var o=l.startClients[0]?l.startClients:g(t);l.customDist=[0,0],l.flag=!0,l.isDrag=!1,l.startClients=o,l.prevClients=o,l.datas={};var c=p(o[l.movement=0],l.prevClients[0],l.startClients[0]);(!a||3!==t.which&&2!==t.button)&&!1!==(e&&e(u({type:"dragstart",datas:l.datas,inputEvent:t},c)))||(l.startClients=[],l.prevClients=[],l.flag=!1),l.isDouble=C()-l.prevTime<200,l.flag&&r&&t.preventDefault()}}},this.onDrag=function(t,i){if(l.flag){var n=g(t);l.pinchFlag&&l.onPinch(t,n);var s=l.move([0,0],t,n);if(s&&(s.deltaX||s.deltaY)){var e=l.options.drag;e&&e(u({},s,{isScroll:!!i,inputEvent:t}))}}},this.onDragEnd=function(t){if(l.flag){var i=l.options,n=i.dragend,s=i.pinchOutside,e=i.container;l.isTouch&&s&&Y(e,"touchstart",l.onDragStart),l.pinchFlag&&l.onPinchEnd(t),l.flag=!1;var a=l.prevClients,r=l.startClients,h=l.pinchFlag?f(a,a,r,l.startPinchClients):p(a[0],a[0],r[0]),o=C(),c=!l.isDrag&&l.isDouble;l.prevTime=l.isDrag||c?0:o,l.startClients=[],l.prevClients=[],n&&n(u({type:"dragend",datas:l.datas,isDouble:c,isDrag:l.isDrag,inputEvent:t},h))}};var n=[].concat(t);this.options=u({container:1<n.length?window:n[0],preventRightClick:!0,preventDefault:!0,pinchThreshold:0,events:["touch","mouse"]},i);var s=this.options,e=s.container,a=s.events;if(this.isTouch=-1<a.indexOf("touch"),this.isMouse=-1<a.indexOf("mouse"),this.customDist=[0,0],this.targets=n,this.isMouse&&(n.forEach(function(t){X(t,"mousedown",l.onDragStart)}),X(e,"mousemove",this.onDrag),X(e,"mouseup",this.onDragEnd),X(e,"contextmenu",this.onDragEnd)),this.isTouch){var r={passive:!1};n.forEach(function(t){X(t,"touchstart",l.onDragStart,r)}),X(e,"touchmove",this.onDrag,r),X(e,"touchend",this.onDragEnd,r),X(e,"touchcancel",this.onDragEnd,r)}}var i=t.prototype;return i.isDragging=function(){return this.isDrag},i.isFlag=function(){return this.flag},i.isPinchFlag=function(){return this.pinchFlag},i.isPinching=function(){return this.isPinch},i.scrollBy=function(i,n,t,s){void 0===s&&(s=!0),this.flag&&(this.startClients.forEach(function(t){t.clientX-=i,t.clientY-=n}),this.prevClients.forEach(function(t){t.clientX-=i,t.clientY-=n}),s&&this.onDrag(t,!0))},i.move=function(t,i,n){var s=t[0],e=t[1];void 0===n&&(n=this.prevClients);var a=this.customDist,r=this.prevClients,h=this.startClients,o=this.pinchFlag?f(n,r,h,this.startPinchClients):p(n[0],r[0],h[0]);a[0]+=s,a[1]+=e,o.deltaX+=s,o.deltaY+=e;var c=o.deltaX,l=o.deltaY;return o.distX+=a[0],o.distY+=a[1],this.movement+=Math.sqrt(c*c+l*l),this.prevClients=n,this.isDrag=!0,u({type:"drag",datas:this.datas},o,{movement:this.movement,isDrag:this.isDrag,isPinch:this.isPinch,isScroll:!1,inputEvent:i})},i.onPinchStart=function(t){var i,n,s=this.options,e=s.pinchstart,a=s.pinchThreshold;if(!(this.isDrag&&this.movement>a)){var r=D(t.changedTouches);if(this.pinchFlag=!0,(i=this.startClients).push.apply(i,r),(n=this.prevClients).push.apply(n,r),this.startDistance=v(this.prevClients),this.startPinchClients=this.prevClients.slice(),e){var h=this.prevClients,o=m(h),c=p(o,o,o);this.startRotate=l(h),e(u({type:"pinchstart",datas:this.datas,angle:this.startRotate,touches:d(h,h,h)},c,{inputEvent:t}))}}},i.onPinch=function(t,i){if(this.flag&&this.pinchFlag&&!(i.length<2)){this.isPinch=!0;var n=this.options.pinch;if(n){var s=this.prevClients,e=this.startClients,a=p(m(i),m(s),m(e)),r=l(i),h=v(i);n(u({type:"pinch",datas:this.datas,movement:this.movement,angle:r,rotation:r-this.startRotate,touches:d(i,s,e),scale:h/this.startDistance,distance:h},a,{inputEvent:t}))}}},i.onPinchEnd=function(t){if(this.flag&&this.pinchFlag){var i=this.isPinch;this.isPinch=!1,this.pinchFlag=!1;var n=this.options.pinchend;if(n){var s=this.prevClients,e=this.startClients,a=p(m(s),m(s),m(e));n(u({type:"pinchend",datas:this.datas,isPinch:i,touches:d(s,s,e)},a,{inputEvent:t})),this.isPinch=!1,this.pinchFlag=!1}}},i.unset=function(){var i=this,t=this.targets,n=this.options.container;this.isMouse&&(t.forEach(function(t){Y(t,"mousedown",i.onDragStart)}),Y(n,"mousemove",this.onDrag),Y(n,"mouseup",this.onDragEnd),Y(n,"contextmenu",this.onDragEnd)),this.isTouch&&(t.forEach(function(t){Y(t,"touchstart",i.onDragStart)}),Y(n,"touchstart",this.onDragStart),Y(n,"touchmove",this.onDrag),Y(n,"touchend",this.onDragEnd),Y(n,"touchcancel",this.onDragEnd))},t}();var t={default:n,drag:function(t,i){return new n(t,i)}};for(var i in t)n[i]=t[i];return n});
+!function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t=t||self).Dragger=i()}(this,function(){"use strict";var p=function(){return(p=Object.assign||function(t){for(var i,n=1,e=arguments.length;n<e;n++)for(var s in i=arguments[n])Object.prototype.hasOwnProperty.call(i,s)&&(t[s]=i[s]);return t}).apply(this,arguments)};function l(t){return function(t,i){var n=i[0]-t[0],e=i[1]-t[1],s=Math.atan2(e,n);return 0<=s?s:s+2*Math.PI}([t[0].clientX,t[0].clientY],[t[1].clientX,t[1].clientY])/Math.PI*180}function u(t,i,n,e){var s=m(t),a=m(i),r=m(e);return d(h(e[0],o(s,r)),h(e[0],o(a,r)),n[0])}function v(t){return t.touches?D(t.touches):[s(t)]}function d(t,i,n){var e=t.clientX,s=t.clientY;return{clientX:e,clientY:s,deltaX:e-i.clientX,deltaY:s-i.clientY,distX:e-n.clientX,distY:s-n.clientY}}function f(t){return Math.sqrt(Math.pow(t[0].clientX-t[1].clientX,2)+Math.pow(t[0].clientY-t[1].clientY,2))}function g(t,n,e){return t.map(function(t,i){return d(t,n[i],e[i])})}function D(t){for(var i=Math.min(t.length,2),n=[],e=0;e<i;++e)n.push(s(t[e]));return n}function s(t){return{clientX:t.clientX,clientY:t.clientY}}function m(t){return 1===t.length?t[0]:{clientX:(t[0].clientX+t[1].clientX)/2,clientY:(t[0].clientY+t[1].clientY)/2}}function h(t,i){return{clientX:t.clientX+i.clientX,clientY:t.clientY+i.clientY}}function o(t,i){return{clientX:t.clientX-i.clientX,clientY:t.clientY-i.clientY}}function C(){return Date.now?Date.now():(new Date).getTime()}function E(t,i,n,e){t.addEventListener(i,n,e)}function X(t,i,n){t.removeEventListener(i,n)}var Y=["textarea","input"],n=function(){function t(t,i){var g=this;void 0===i&&(i={}),this.options={},this.flag=!1,this.pinchFlag=!1,this.datas={},this.isDrag=!1,this.isPinch=!1,this.isMouse=!1,this.isTouch=!1,this.prevClients=[],this.startClients=[],this.movement=0,this.startPinchClients=[],this.startDistance=0,this.customDist=[0,0],this.targets=[],this.prevTime=0,this.isDouble=!1,this.startRotate=0,this.onDragStart=function(t){if(g.flag||!1!==t.cancelable){var i=g.options,n=i.container,e=i.pinchOutside,s=i.dragstart,a=i.preventRightClick,r=i.preventDefault,h=i.checkInput,o=g.isTouch;if(!g.flag&&h){var c=t.target,l=c.tagName.toLowerCase();if(-1<Y.indexOf(l)||c.isContentEditable)return!1}if(!g.flag&&o&&e&&setTimeout(function(){E(n,"touchstart",g.onDragStart)}),g.flag&&o&&e&&X(n,"touchstart",g.onDragStart),function(t){return t.touches&&2<=t.touches.length}(t)){if(!g.flag&&t.touches.length!==t.changedTouches.length)return;g.pinchFlag||g.onPinchStart(t)}if(!g.flag){var u=g.startClients[0]?g.startClients:v(t);g.customDist=[0,0],g.flag=!0,g.isDrag=!1,g.startClients=u,g.prevClients=u,g.datas={};var f=d(u[g.movement=0],g.prevClients[0],g.startClients[0]);if(a&&(3===t.which||2===t.button))return g.initDrag(),!1;!1===(s&&s(p({type:"dragstart",datas:g.datas,inputEvent:t},f)))&&g.initDrag(),g.isDouble=C()-g.prevTime<200,g.flag&&r&&t.preventDefault()}}},this.onDrag=function(t,i){if(g.flag){var n=v(t);g.pinchFlag&&g.onPinch(t,n);var e=g.move([0,0],t,n);if(e&&(e.deltaX||e.deltaY)){var s=g.options.drag;s&&s(p({},e,{isScroll:!!i,inputEvent:t}))}}},this.onDragEnd=function(t){if(g.flag){var i=g.options,n=i.dragend,e=i.pinchOutside,s=i.container;g.isTouch&&e&&X(s,"touchstart",g.onDragStart),g.pinchFlag&&g.onPinchEnd(t),g.flag=!1;var a=g.prevClients,r=g.startClients,h=g.pinchFlag?u(a,a,r,g.startPinchClients):d(a[0],a[0],r[0]),o=C(),c=!g.isDrag&&g.isDouble;g.prevTime=g.isDrag||c?0:o,g.startClients=[],g.prevClients=[],n&&n(p({type:"dragend",datas:g.datas,isDouble:c,isDrag:g.isDrag,inputEvent:t},h))}};var n=[].concat(t);this.options=p({checkInput:!0,container:1<n.length?window:n[0],preventRightClick:!0,preventDefault:!0,pinchThreshold:0,events:["touch","mouse"]},i);var e=this.options,s=e.container,a=e.events;if(this.isTouch=-1<a.indexOf("touch"),this.isMouse=-1<a.indexOf("mouse"),this.customDist=[0,0],this.targets=n,this.isMouse&&(n.forEach(function(t){E(t,"mousedown",g.onDragStart)}),E(s,"mousemove",this.onDrag),E(s,"mouseup",this.onDragEnd),E(s,"contextmenu",this.onDragEnd)),this.isTouch){var r={passive:!1};n.forEach(function(t){E(t,"touchstart",g.onDragStart,r)}),E(s,"touchmove",this.onDrag,r),E(s,"touchend",this.onDragEnd,r),E(s,"touchcancel",this.onDragEnd,r)}}var i=t.prototype;return i.isDragging=function(){return this.isDrag},i.isFlag=function(){return this.flag},i.isPinchFlag=function(){return this.pinchFlag},i.isPinching=function(){return this.isPinch},i.scrollBy=function(i,n,t,e){void 0===e&&(e=!0),this.flag&&(this.startClients.forEach(function(t){t.clientX-=i,t.clientY-=n}),this.prevClients.forEach(function(t){t.clientX-=i,t.clientY-=n}),e&&this.onDrag(t,!0))},i.move=function(t,i,n){var e=t[0],s=t[1];void 0===n&&(n=this.prevClients);var a=this.customDist,r=this.prevClients,h=this.startClients,o=this.pinchFlag?u(n,r,h,this.startPinchClients):d(n[0],r[0],h[0]);a[0]+=e,a[1]+=s,o.deltaX+=e,o.deltaY+=s;var c=o.deltaX,l=o.deltaY;return o.distX+=a[0],o.distY+=a[1],this.movement+=Math.sqrt(c*c+l*l),this.prevClients=n,this.isDrag=!0,p({type:"drag",datas:this.datas},o,{movement:this.movement,isDrag:this.isDrag,isPinch:this.isPinch,isScroll:!1,inputEvent:i})},i.onPinchStart=function(t){var i,n,e=this.options,s=e.pinchstart,a=e.pinchThreshold;if(!(this.isDrag&&this.movement>a)){var r=D(t.changedTouches);if(this.pinchFlag=!0,(i=this.startClients).push.apply(i,r),(n=this.prevClients).push.apply(n,r),this.startDistance=f(this.prevClients),this.startPinchClients=this.prevClients.slice(),s){var h=this.prevClients,o=m(h),c=d(o,o,o);this.startRotate=l(h),s(p({type:"pinchstart",datas:this.datas,angle:this.startRotate,touches:g(h,h,h)},c,{inputEvent:t}))}}},i.onPinch=function(t,i){if(this.flag&&this.pinchFlag&&!(i.length<2)){this.isPinch=!0;var n=this.options.pinch;if(n){var e=this.prevClients,s=this.startClients,a=d(m(i),m(e),m(s)),r=l(i),h=f(i);n(p({type:"pinch",datas:this.datas,movement:this.movement,angle:r,rotation:r-this.startRotate,touches:g(i,e,s),scale:h/this.startDistance,distance:h},a,{inputEvent:t}))}}},i.onPinchEnd=function(t){if(this.flag&&this.pinchFlag){var i=this.isPinch;this.isPinch=!1,this.pinchFlag=!1;var n=this.options.pinchend;if(n){var e=this.prevClients,s=this.startClients,a=d(m(e),m(e),m(s));n(p({type:"pinchend",datas:this.datas,isPinch:i,touches:g(e,e,s)},a,{inputEvent:t})),this.isPinch=!1,this.pinchFlag=!1}}},i.unset=function(){var i=this,t=this.targets,n=this.options.container;this.isMouse&&(t.forEach(function(t){X(t,"mousedown",i.onDragStart)}),X(n,"mousemove",this.onDrag),X(n,"mouseup",this.onDragEnd),X(n,"contextmenu",this.onDragEnd)),this.isTouch&&(t.forEach(function(t){X(t,"touchstart",i.onDragStart)}),X(n,"touchstart",this.onDragStart),X(n,"touchmove",this.onDrag),X(n,"touchend",this.onDragEnd),X(n,"touchcancel",this.onDragEnd))},i.initDrag=function(){this.startClients=[],this.prevClients=[],this.flag=!1},t}();var t={default:n,drag:function(t,i){return new n(t,i)}};for(var i in t)n[i]=t[i];return n});
 //# sourceMappingURL=drag.min.js.map

package.json

 {
   "name": "@daybrush/drag",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "You can set up drag events in any browser.",
@@ -5,0 +5,0 @@ "main": "./dist/drag.cjs.js",

src/Dragger.ts

@@ -8,2 +8,3 @@ import { DragOptions, Client, Position, OnDrag } from "./types";
 
+const INPUT_TAGNAMES = ["textarea", "input"];
 /**
@@ -37,2 +38,3 @@ * You can set up drag events in any browser.
         this.options = {
+            checkInput: true,
             container: elements.length > 1 ? window : elements[0],
@@ -121,5 +123,13 @@ preventRightClick: true,
         }
-        const { container, pinchOutside, dragstart, preventRightClick, preventDefault } = this.options;
+        const { container, pinchOutside, dragstart, preventRightClick, preventDefault, checkInput } = this.options;
         const isTouch = this.isTouch;
 
+        if (!this.flag && checkInput) {
+            const target = e.target as HTMLElement;
+            const tagName = target.tagName.toLowerCase();
+
+            if (INPUT_TAGNAMES.indexOf(tagName) > -1 || target.isContentEditable) {
+                return false;
+            }
+        }
         if (!this.flag && isTouch && pinchOutside) {
@@ -156,14 +166,15 @@ setTimeout(() => {
 
-        if (
-            (preventRightClick && (e.which === 3 || e.button === 2))
-            || (dragstart && dragstart({
-                type: "dragstart",
-                datas: this.datas,
-                inputEvent: e,
-                ...position,
-            })) === false) {
-            this.startClients = [];
-            this.prevClients = [];
-            this.flag = false;
+        if (preventRightClick && (e.which === 3 || e.button === 2)) {
+            this.initDrag();
+            return false;
         }
+        const result = dragstart && dragstart({
+            type: "dragstart",
+            datas: this.datas,
+            inputEvent: e,
+            ...position,
+        });
+        if (result === false) {
+            this.initDrag();
+        }
         this.isDouble = now() - this.prevTime < 200;
@@ -389,4 +400,9 @@ this.flag && preventDefault && e.preventDefault();
     }
+    private initDrag() {
+        this.startClients = [];
+        this.prevClients = [];
+        this.flag = false;
+    }
 }
 
 export default Dragger;

src/types.ts

@@ -131,2 +131,3 @@ import { IObject } from "@daybrush/utils";
     pinchOutside?: boolean;
+    checkInput?: boolean;
     dragstart?: (options: OnDragStart) => any;
@@ -133,0 +134,0 @@ drag?: (options: OnDrag) => any;

No alert changes

Improved metrics

Total package byte prevSize

213277

increased by2.97%

Lines of code

2532

increased by2.97%

No dependency changes