From 0935d8b58f3fc84a5f6f54a21f9862b606b9e60f Mon Sep 17 00:00:00 2001 From: owen-m1 Date: Sat, 2 Mar 2019 15:04:49 -0500 Subject: [PATCH] #659: Fixed delay in FireFox + Delay browser compatibility fixes --- README.md | 1 + Sortable.js | 40 ++++++++++++++++++++++++++++------------ 2 files changed, 29 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 5c6edc129..247d0228a 100644 --- a/README.md +++ b/README.md @@ -235,6 +235,7 @@ Demo: https://jsbin.com/jayedig/edit?js,output #### `delay` option Time in milliseconds to define when the sorting should start. +Unfortunately, due to browser restrictions, delaying is not possible on IE or Edge with native drag & drop. Demo: https://jsbin.com/zosiwah/edit?js,output diff --git a/Sortable.js b/Sortable.js index 16d477669..29fac429b 100644 --- a/Sortable.js +++ b/Sortable.js @@ -81,7 +81,7 @@ define('sortable', [], function sortableFactory() { IE11OrLess = !!navigator.userAgent.match(/(?:Trident.*rv[ :]?11\.|msie|iemobile)/i), Edge = !!navigator.userAgent.match(/Edge/i), - // FireFox = !!navigator.userAgent.match(/firefox/i), + FireFox = !!navigator.userAgent.match(/firefox/i), Safari = !!(navigator.userAgent.match(/safari/i) && !navigator.userAgent.match(/chrome/i) && !navigator.userAgent.match(/android/i)), CSSFloatProperty = Edge || IE11OrLess ? 'cssFloat' : 'float', @@ -104,6 +104,7 @@ define('sortable', [], function sortableFactory() { abs = Math.abs, min = Math.min, + max = Math.max, savedInputChecked = [], @@ -236,9 +237,6 @@ define('sortable', [], function sortableFactory() { x = evt.clientX, y = evt.clientY, - winWidth = window.innerWidth, - winHeight = window.innerHeight, - scrollThisInstance = false; // Detect scrollEl @@ -562,6 +560,11 @@ define('sortable', [], function sortableFactory() { // Setup drag mode this.nativeDraggable = options.forceFallback ? false : supportDraggable; + if (this.nativeDraggable) { + // Touch start threshold cannot be greater than the native dragstart threshold + this.options.touchStartThreshold = 1; + } + // Bind events if (options.supportPointer) { _on(el, 'pointerdown', this._onTapStart); @@ -793,10 +796,11 @@ define('sortable', [], function sortableFactory() { dragStartFn = function () { // Delayed drag has been triggered // we can re-enable the events: touchmove/mousemove - _this._disableDelayedDrag(); + _this._disableDelayedDragEvents(); - // Make the element draggable - dragEl.draggable = _this.nativeDraggable; + if (!FireFox && _this.nativeDraggable) { + dragEl.draggable = true; + } // Bind the events: dragstart/dragend _this._triggerDragStart(evt, touch); @@ -821,7 +825,14 @@ define('sortable', [], function sortableFactory() { _on(ownerDocument, 'touchcancel', _this._onDrop); } - if (options.delay) { + // Make dragEl draggable (must be before delay for FireFox) + if (FireFox && this.nativeDraggable) { + this.options.touchStartThreshold = 4; + dragEl.draggable = true; + } + + // Delay is impossible for native DnD in Edge or IE + if (options.delay && (!this.nativeDraggable || !(Edge || IE11OrLess))) { // If the user moves the pointer or let go the click or touch // before the delay has been reached: // disable the delayed drag @@ -841,17 +852,22 @@ define('sortable', [], function sortableFactory() { _delayedDragTouchMoveHandler: function (/** TouchEvent|PointerEvent **/e) { var touch = e.touches ? e.touches[0] : e; - if (min(abs(touch.clientX - this._lastX), abs(touch.clientY - this._lastY)) - >= this.options.touchStartThreshold + if (max(abs(touch.clientX - this._lastX), abs(touch.clientY - this._lastY)) + >= Math.floor(this.options.touchStartThreshold / (this.nativeDraggable && window.devicePixelRatio || 1)) ) { this._disableDelayedDrag(); } }, _disableDelayedDrag: function () { - var ownerDocument = this.el.ownerDocument; - + dragEl && _disableDraggable(dragEl); clearTimeout(this._dragStartTimer); + + this._disableDelayedDragEvents(); + }, + + _disableDelayedDragEvents: function () { + var ownerDocument = this.el.ownerDocument; _off(ownerDocument, 'mouseup', this._disableDelayedDrag); _off(ownerDocument, 'touchend', this._disableDelayedDrag); _off(ownerDocument, 'touchcancel', this._disableDelayedDrag);