diff --git a/README.md b/README.md index 5c6edc12945f98e6026a1e7b972e150a6a31e070..247d0228a34294b45bb4ebf4fea57bb6bef112bc 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 e9f15de54e3f8fceb9cb178f236b95896c2450ad..62d5ca4bf75eafd2066f913cf4c4b70d31ad64f6 100644 --- a/Sortable.js +++ b/Sortable.js @@ -94,7 +94,7 @@ 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', @@ -117,6 +117,7 @@ abs = Math.abs, min = Math.min, + max = Math.max, savedInputChecked = [], @@ -249,9 +250,6 @@ x = evt.clientX, y = evt.clientY, - winWidth = window.innerWidth, - winHeight = window.innerHeight, - scrollThisInstance = false; // Detect scrollEl @@ -575,6 +573,11 @@ // 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); @@ -806,10 +809,11 @@ 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); @@ -834,7 +838,14 @@ _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 @@ -854,17 +865,22 @@ _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);