knockout-dragdrop - npm Package Compare versions

Comparing version 2.2.0 to 2.3.0

lib/knockout.dragdrop.js

@@ -21,2 +21,6 @@ /*global ko*/
 
+    var touchSupport = 'ontouchstart' in document.documentElement;
+
+    var dragging = false;
+
     function extend(out) {
@@ -75,2 +79,11 @@ out = out || {};
 
+    function getEventCoord(event, axis) {
+        if (event.type.indexOf('touch') >= 0) {
+            // if multi touch this will be the first touch
+            return event.changedTouches[0][axis];
+        } else {
+            return event[axis];
+        }
+    }
+
     Zone.prototype.init = function (args) {
@@ -118,3 +131,3 @@ this.element = args.element;
     Zone.prototype.update = function (event, data) {
-        if (this.isInside(event.pageX, event.pageY)) {
+        if (this.isInside(getEventCoord(event, 'pageX'), getEventCoord(event, 'pageY'))) {
             if (!this.inside) {
@@ -182,2 +195,4 @@ this.enter(event, data);
         this.element.style.left = (event.pageX - window.pageXOffset) + 'px';
+        this.element.style.top = (getEventCoord(event, 'pageY') - window.pageYOffset) + 'px';
+        this.element.style.left = (getEventCoord(event, 'pageX') - window.pageXOffset) + 'px';
     };
@@ -491,4 +506,4 @@
                 toggleClass(element, 'draggable', true);
-                element.addEventListener('mousedown', function (downEvent) {
-                    if (downEvent.which !== 1) {
+                function beginEvent(downEvent) {
+                    if (downEvent.button > 0) {
                         return true;
@@ -501,11 +516,19 @@ }
                         document.removeEventListener('mouseup', onMouseUpStartDrag, true);
+                        document.removeEventListener('touchend', onMouseUpStartDrag, true);
                         document.removeEventListener('click', onMouseUpStartDrag, true);
                         document.removeEventListener('mousemove', onMouseMoveStartDrag, true);
+                        document.removeEventListener('touchmove', onTouchMoveStartDrag, true);
 
+                        if (dragging) {
+                            return true;
+                        }
+
                         if (draggable.startDrag(downEvent) === false) {
-                            event.preventDefault();
-                            event.stopPropagation();
+                            startEvent.preventDefault();
+                            startEvent.stopPropagation();
                             return false;
                         }
 
+                        dragging = true;
+
                         var dragElement = null;
@@ -562,2 +585,4 @@ if (typeof options.element === 'undefined') {
                         function cancelDrag(e) {
+                            dragging = false;
+                            clearTimeout(touchDragTimer);
                             clearTimeout(dragTimer);
@@ -570,2 +595,6 @@ if (dragElement) {
 
+                            //cleanup the touch events because they are on the document not the overlay
+                            document.removeEventListener('touchmove', dragHandler);
+                            document.removeEventListener('touchend', finishEvent);
+
                             e.preventDefault();
@@ -576,4 +605,4 @@ e.stopPropagation();
 
-                        overlay.addEventListener('mousemove', function (moveEvent) {
-                            if (moveEvent.which !== 1) {
+                        function dragHandler(moveEvent) {
+                            if (moveEvent.button > 0) {
                                 return cancelDrag(moveEvent);
@@ -590,5 +619,13 @@ }
                             return false;
-                        });
+                        }
 
-                        overlay.addEventListener('mouseup', function (upEvent) {
+                        if (!touchSupport) {
+                            overlay.addEventListener('mousedown', cancelDrag);
+                        }
+                        overlay.addEventListener('mousemove', dragHandler);
+                        document.addEventListener('touchmove', dragHandler);
+
+                        function finishEvent(upEvent) {
+                            dragging = false;
+                            clearTimeout(touchDragTimer);
                             clearTimeout(dragTimer);
@@ -600,10 +637,19 @@ if (dragElement) {
                             var cloneEvent = extend({}, upEvent);
-                            cloneEvent.target = document.elementFromPoint(upEvent.clientX, upEvent.clientY);
+                            cloneEvent.target = document.elementFromPoint(
+                                getEventCoord(upEvent, 'clientX'),
+                                getEventCoord(upEvent, 'clientY')
+                            );
                             draggable.drop(cloneEvent);
 
                             document.removeEventListener('selectstart', onSelectStartDrag);
+                            //cleanup the touch events because they are on the document not the overlay
+                            document.removeEventListener('touchmove', dragHandler);
+                            document.removeEventListener('touchend', finishEvent);
+
                             upEvent.preventDefault();
                             upEvent.stopPropagation();
                             return false;
-                        });
+                        }
+                        overlay.addEventListener('mouseup', finishEvent);
+                        document.addEventListener('touchend', finishEvent);
                     }
@@ -613,4 +659,6 @@
                         document.removeEventListener('mouseup', onMouseUpStartDrag, true);
+                        document.removeEventListener('touchend', onMouseUpStartDrag, true);
                         document.removeEventListener('click', onMouseUpStartDrag, true);
                         document.removeEventListener('mousemove', onMouseMoveStartDrag, true);
+                        document.removeEventListener('touchmove', onTouchMoveStartDrag, true);
                         document.removeEventListener('selectstart', onSelectStartDrag);
@@ -620,2 +668,3 @@ return true;
                     document.addEventListener('mouseup', onMouseUpStartDrag, true);
+                    document.addEventListener('touchend', onMouseUpStartDrag, true);
                     document.addEventListener('click', onMouseUpStartDrag, true);
@@ -627,5 +676,6 @@
                         }
-
-                        var distance = Math.sqrt(Math.pow(downEvent.pageX - event.pageX, 2) +
-                                                 Math.pow(downEvent.pageY - event.pageY, 2));
+                        var xDifference = getEventCoord(downEvent, 'pageX') - getEventCoord(event, 'pageX'),
+                            yDifference = getEventCoord(downEvent, 'pageY') - getEventCoord(event, 'pageY'),
+                            distance = Math.sqrt(Math.pow(xDifference, 2) +
+                                                 Math.pow(yDifference, 2));
                         if (distance > dragDistance) {
@@ -638,6 +688,31 @@ startDragging(event);
                     }
+
+                    var touchDragTimer;
+                    if (downEvent.type === 'touchstart') {
+                        touchDragTimer = setTimeout(function () {
+                            startDragging(downEvent);
+                        }, 500);
+                    }
+
+                    function onTouchMoveStartDrag(event) {
+                        if (event.target.tagName && event.target.tagName.toLowerCase() === 'input') {
+                            return true;
+                        }
+
+                        var xDifference = getEventCoord(downEvent, 'pageX') - getEventCoord(event, 'pageX'),
+                            yDifference = getEventCoord(downEvent, 'pageY') - getEventCoord(event, 'pageY'),
+                            distance = Math.sqrt(Math.pow(xDifference, 2) +
+                                                 Math.pow(yDifference, 2));
+                        if (distance > dragDistance) {
+                            clearTimeout(touchDragTimer);
+                        }
+                    }
+
                     document.addEventListener('mousemove', onMouseMoveStartDrag, true);
+                    document.addEventListener('touchmove', onTouchMoveStartDrag, true);
 
                     return true;
-                });
+                }
+                element.addEventListener('mousedown', beginEvent);
+                element.addEventListener('touchstart', beginEvent);
 
@@ -671,4 +746,4 @@ ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
                 function dragOver(e) {
-                    x = e.pageX;
-                    y = e.pageY;
+                    x = getEventCoord(e, 'pageX');
+                    y = getEventCoord(e, 'pageY');
                 }
@@ -675,0 +750,0 @@

package.json

 {
   "name": "knockout-dragdrop",
   "description": "A drag and drop binding for Knockout",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "keywords": [
@@ -6,0 +6,0 @@ "drag and drop"

No alert changes

Improved metrics

Total package byte prevSize

55810

increased by7.57%

Lines of code

952

increased by7.21%

No dependency changes