fix text selection during fallback drag + improve pointer event support

SortableJS · Nov 22, 2024 · f7a645c · f7a645c
1 parent dcb8f9e
commit f7a645c
Showing 1 changed file with 28 additions and 15 deletions.
diff --git a/src/Sortable.js b/src/Sortable.js
@@ -519,7 +519,7 @@ Sortable.prototype = /** @lends Sortable.prototype */ {
 					fromEl: el
 				});
 				pluginEvent('filter', _this, { evt });
-				preventOnFilter && evt.cancelable && evt.preventDefault();
+				preventOnFilter && evt.preventDefault();
 				return; // cancel dnd
 			}
 		}
@@ -542,7 +542,7 @@ Sortable.prototype = /** @lends Sortable.prototype */ {
 			});
 
 			if (filter) {
-				preventOnFilter && evt.cancelable && evt.preventDefault();
+				preventOnFilter && evt.preventDefault();
 				return; // cancel dnd
 			}
 		}
@@ -624,9 +624,15 @@ Sortable.prototype = /** @lends Sortable.prototype */ {
 			on(ownerDocument, 'mousemove', nearestEmptyInsertDetectEvent);
 			on(ownerDocument, 'touchmove', nearestEmptyInsertDetectEvent);
 
-			on(ownerDocument, 'mouseup', _this._onDrop);
-			on(ownerDocument, 'touchend', _this._onDrop);
-			on(ownerDocument, 'touchcancel', _this._onDrop);
+			if (options.supportPointer) {
+				on(ownerDocument, 'pointerup', _this._onDrop);
+				// Native D&D triggers pointercancel
+				!this.nativeDraggable && on(ownerDocument, 'pointercancel', _this._onDrop);
+			} else {
+				on(ownerDocument, 'mouseup', _this._onDrop);
+				on(ownerDocument, 'touchend', _this._onDrop);
+				on(ownerDocument, 'touchcancel', _this._onDrop);
+			}
 
 			// Make dragEl draggable (must be before delay for FireFox)
 			if (FireFox && this.nativeDraggable) {
@@ -645,9 +651,14 @@ Sortable.prototype = /** @lends Sortable.prototype */ {
 				// If the user moves the pointer or let go the click or touch
 				// before the delay has been reached:
 				// disable the delayed drag
-				on(ownerDocument, 'mouseup', _this._disableDelayedDrag);
-				on(ownerDocument, 'touchend', _this._disableDelayedDrag);
-				on(ownerDocument, 'touchcancel', _this._disableDelayedDrag);
+				if (options.supportPointer) {
+					on(ownerDocument, 'pointerup', _this._disableDelayedDrag);
+					on(ownerDocument, 'pointercancel', _this._disableDelayedDrag);
+				} else {
+					on(ownerDocument, 'mouseup', _this._disableDelayedDrag);
+					on(ownerDocument, 'touchend', _this._disableDelayedDrag);
+					on(ownerDocument, 'touchcancel', _this._disableDelayedDrag);
+				}
 				on(ownerDocument, 'mousemove', _this._delayedDragTouchMoveHandler);
 				on(ownerDocument, 'touchmove', _this._delayedDragTouchMoveHandler);
 				options.supportPointer && on(ownerDocument, 'pointermove', _this._delayedDragTouchMoveHandler);
@@ -680,6 +691,8 @@ Sortable.prototype = /** @lends Sortable.prototype */ {
 		off(ownerDocument, 'mouseup', this._disableDelayedDrag);
 		off(ownerDocument, 'touchend', this._disableDelayedDrag);
 		off(ownerDocument, 'touchcancel', this._disableDelayedDrag);
+		off(ownerDocument, 'pointerup', this._disableDelayedDrag);
+		off(ownerDocument, 'pointercancel', this._disableDelayedDrag);
 		off(ownerDocument, 'mousemove', this._delayedDragTouchMoveHandler);
 		off(ownerDocument, 'touchmove', this._delayedDragTouchMoveHandler);
 		off(ownerDocument, 'pointermove', this._delayedDragTouchMoveHandler);
@@ -702,14 +715,13 @@ Sortable.prototype = /** @lends Sortable.prototype */ {
 		}
 
 		try {
-			if (document.selection) {
-				// Timeout neccessary for IE9
-				_nextTick(function () {
+			_nextTick(function () {
+				if (document.selection) {
 					document.selection.empty();
-				});
-			} else {
-				window.getSelection().removeAllRanges();
-			}
+				} else {
+					window.getSelection().removeAllRanges();
+				}
+			});
 		} catch (err) {
 		}
 	},
@@ -1333,6 +1345,7 @@ Sortable.prototype = /** @lends Sortable.prototype */ {
 		off(ownerDocument, 'mouseup', this._onDrop);
 		off(ownerDocument, 'touchend', this._onDrop);
 		off(ownerDocument, 'pointerup', this._onDrop);
+		off(ownerDocument, 'pointercancel', this._onDrop);
 		off(ownerDocument, 'touchcancel', this._onDrop);
 		off(document, 'selectstart', this);
 	},