drag-drop-touch - npm Package Compare versions

Comparing version 1.3.0 to 1.3.1

DragDropTouch.js

@@ -20,3 +20,3 @@ var DragDropTouch;
         }
-        Object.defineProperty(DataTransfer.prototype, "dropEffect", {
+        Object.defineProperty(DataTransfer.prototype, 'dropEffect', {
             /**
@@ -35,3 +35,3 @@ * Gets or sets the type of drag-and-drop operation currently selected.
         });
-        Object.defineProperty(DataTransfer.prototype, "effectAllowed", {
+        Object.defineProperty(DataTransfer.prototype, 'effectAllowed', {
             /**
@@ -51,3 +51,3 @@ * Gets or sets the types of operations that are possible.
         });
-        Object.defineProperty(DataTransfer.prototype, "types", {
+        Object.defineProperty(DataTransfer.prototype, 'types', {
             /**
@@ -174,3 +174,5 @@ * Gets an array of strings giving the formats that were set in the @see:dragstart event.
                     if (this._dispatchEvent(e, 'dblclick', e.target)) {
-                        e.preventDefault();
+                        if (e.cancelable) {
+                            e.preventDefault();
+                        }
                         this._reset();
@@ -192,3 +194,5 @@ return;
                         this._lastTouch = e;
-                        e.preventDefault();
+                        if (e.cancelable) {
+                            e.preventDefault();
+                        }
                         // show context menu if the user hasn't started dragging after a while
@@ -202,2 +206,8 @@ setTimeout(function () {
                         }, DragDropTouch._CTXMENU);
+                        if (DragDropTouch._ISPRESSHOLDMODE) {
+                            this._pressHoldInterval = setTimeout(function () {
+                                _this._isDragEnabled = true;
+                                _this._touchmove(e);
+                            }, DragDropTouch._PRESSHOLDAWAIT);
+                        }
                     }
@@ -208,3 +218,7 @@ }
         DragDropTouch.prototype._touchmove = function (e) {
-            if (this._shouldHandle(e)) {
+            if (this._shouldCancelPressHoldMove(e)) {
+              this._reset();
+              return;
+            }
+            if (this._shouldHandleMove(e) || this._shouldHandlePressHoldMove(e)) {
                 // see if target wants to handle move
@@ -214,13 +228,12 @@ var target = this._getTarget(e);
                     this._lastTouch = e;
-                    e.preventDefault();
-                    return;
+                    if (e.cancelable) {
+                        e.preventDefault();
+                    }
+                return;
                 }
                 // start dragging
-                if (this._dragSource && !this._img) {
-                    var delta = this._getDelta(e);
-                    if (delta > DragDropTouch._THRESHOLD) {
-                        this._dispatchEvent(e, 'dragstart', this._dragSource);
-                        this._createImage(e);
-                        this._dispatchEvent(e, 'dragenter', target);
-                    }
+                if (this._dragSource && !this._img && this._shouldStartDragging(e)) {
+                    this._dispatchEvent(e, 'dragstart', this._dragSource);
+                    this._createImage(e);
+                    this._dispatchEvent(e, 'dragenter', target);
                 }
@@ -230,3 +243,5 @@ // continue dragging
                     this._lastTouch = e;
-                    e.preventDefault(); // prevent scrolling
+                    if (e.cancelable) {
+                        e.preventDefault(); // prevent scrolling
+                    }
                     if (target != this._lastTarget) {
@@ -238,3 +253,3 @@ this._dispatchEvent(this._lastTouch, 'dragleave', this._lastTarget);
                     this._moveImage(e);
-                    this._dispatchEvent(e, 'dragover', target);
+                    this._isDropZone = this._dispatchEvent(e, 'dragover', target);
                 }
@@ -247,3 +262,5 @@ }
                 if (this._dispatchEvent(this._lastTouch, 'mouseup', e.target)) {
-                    e.preventDefault();
+                    if (e.cancelable) {
+                        e.preventDefault();
+                    }
                     return;
@@ -260,3 +277,3 @@ }
                 if (this._dragSource) {
-                    if (e.type.indexOf('cancel') < 0) {
+                    if (e.type.indexOf('cancel') < 0 && this._isDropZone) {
                         this._dispatchEvent(this._lastTouch, 'drop', this._lastTarget);
@@ -276,2 +293,27 @@ }
         };
+
+        // use regular condition outside of press & hold mode
+        DragDropTouch.prototype._shouldHandleMove = function (e) {
+          return !DragDropTouch._ISPRESSHOLDMODE && this._shouldHandle(e);
+        };
+
+        // allow to handle moves that involve many touches for press & hold
+        DragDropTouch.prototype._shouldHandlePressHoldMove = function (e) {
+          return DragDropTouch._ISPRESSHOLDMODE &&
+              this._isDragEnabled && e && e.touches && e.touches.length;
+        };
+
+        // reset data if user drags without pressing & holding
+        DragDropTouch.prototype._shouldCancelPressHoldMove = function (e) {
+          return DragDropTouch._ISPRESSHOLDMODE && !this._isDragEnabled &&
+              this._getDelta(e) > DragDropTouch._PRESSHOLDMARGIN;
+        };
+
+        // start dragging when specified delta is detected
+        DragDropTouch.prototype._shouldStartDragging = function (e) {
+            var delta = this._getDelta(e);
+            return delta > DragDropTouch._THRESHOLD ||
+                (DragDropTouch._ISPRESSHOLDMODE && delta >= DragDropTouch._PRESSHOLDTHRESHOLD);
+        }
+
         // clear all members
@@ -284,3 +326,6 @@ DragDropTouch.prototype._reset = function () {
             this._ptDown = null;
+            this._isDragEnabled = false;
+            this._isDropZone = false;
             this._dataTransfer = new DataTransfer();
+            clearInterval(this._pressHoldInterval);
         };
@@ -296,2 +341,3 @@ // get point for a touch event
         DragDropTouch.prototype._getDelta = function (e) {
+            if (DragDropTouch._ISPRESSHOLDMODE && !this._ptDown) { return 0; }
             var p = this._getPoint(e);
@@ -415,2 +461,6 @@ return Math.abs(p.x - this._ptDown.x) + Math.abs(p.y - this._ptDown.y);
     DragDropTouch._CTXMENU = 900; // ms to hold before raising 'contextmenu' event
+    DragDropTouch._ISPRESSHOLDMODE = false; // decides of press & hold mode presence
+    DragDropTouch._PRESSHOLDAWAIT = 400; // ms to wait before press & hold is detected
+    DragDropTouch._PRESSHOLDMARGIN = 25; // pixels that finger might shiver while pressing
+    DragDropTouch._PRESSHOLDTHRESHOLD = 0; // pixels to move before drag starts
     // copy styles/attributes from drag source to drag image element
@@ -417,0 +467,0 @@ DragDropTouch._rmvAtts = 'id,class,style,draggable'.split(',');

package.json

 {
   "name": "drag-drop-touch",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "Polyfill that enables HTML5 drag drop support on mobile (touch) devices",
@@ -5,0 +5,0 @@ "main": "DragDropTouch.js",

README.md

@@ -67,4 +67,3 @@ # DragDropTouch
 
-Thanks to Bernardo Castilho, who pretty much wrote this entire polyfill apart from a couple of tweeks:
-[DragDropTouch](https://github.com/Bernardo-Castilho).
+Thanks to Bernardo Castilho, who pretty much wrote this entire polyfill apart from a couple of tweaks: [DragDropTouch](https://github.com/Bernardo-Castilho).
 
@@ -71,0 +70,0 @@ Thanks to Eric Bidelman for the great tutorial on HTML5 drag and drop: [Native HTML5 Drag and Drop](http://www.html5rocks.com/en/tutorials/dnd/basics/).

No alert changes

Improved metrics

Total package byte prevSize

25283

11%

Lines of code

452

11.06%

Worsened metrics

Number of lines in readme file

78

-1.27%

No dependency changes