From 61da55e530d31176f717b44716c37be13a077216 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Thu, 30 Jun 2016 11:06:37 -0400 Subject: [PATCH 1/3] Draggable: Remove handle class when disabled to allow scrolling Fixes #14779 --- ui/widgets/draggable.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/ui/widgets/draggable.js b/ui/widgets/draggable.js index 9e46c81bb00..8597f143b93 100644 --- a/ui/widgets/draggable.js +++ b/ui/widgets/draggable.js @@ -78,7 +78,11 @@ $.widget( "ui.draggable", $.ui.mouse, { if ( this.options.addClasses ) { this._addClass( "ui-draggable" ); } - this._setHandleClassName(); + + this.handleElement = $(); + if ( !this.options.disabled ) { + this._setHandleClassName(); + } this._mouseInit(); }, @@ -91,6 +95,15 @@ $.widget( "ui.draggable", $.ui.mouse, { } }, + _setOptionDisabled: function( value ) { + // Remove the handle class when disabled since that controls touch-action + if ( value ) { + this._removeHandleClassName(); + } else { + this._setHandleClassName(); + } + }, + _destroy: function() { if ( ( this.helper || this.element ).is( ".ui-draggable-dragging" ) ) { this.destroyOnClear = true; From cd6320eb946947fa81dcd17b05edbc7f78b009b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Tue, 4 Oct 2016 16:48:56 -0400 Subject: [PATCH 2/3] fixup: New implementation --- tests/unit/draggable/draggable.html | 2 +- tests/unit/draggable/options.js | 5 ++++- themes/base/draggable.css | 2 +- ui/widgets/draggable.js | 11 +++++------ 4 files changed, 11 insertions(+), 9 deletions(-) diff --git a/tests/unit/draggable/draggable.html b/tests/unit/draggable/draggable.html index 53468a3a998..2e741310727 100644 --- a/tests/unit/draggable/draggable.html +++ b/tests/unit/draggable/draggable.html @@ -5,7 +5,7 @@ - + #main { diff --git a/tests/unit/draggable/options.js b/tests/unit/draggable/options.js index 656df621f0f..34d38979487 100644 --- a/tests/unit/draggable/options.js +++ b/tests/unit/draggable/options.js @@ -802,17 +802,20 @@ QUnit.test( "cursorAt, switching after initialization", function( assert ) { } ); QUnit.test( "disabled", function( assert ) { - assert.expect( 6 ); + assert.expect( 9 ); var element = $( "#draggable1" ).draggable(); testHelper.shouldMove( assert, element, "disabled: default" ); + assert.equal( element.css( "touch-action" ), "none", "touch-action: default" ); element.draggable( "option", "disabled", true ); testHelper.shouldNotDrag( assert, element, "option: disabled true" ); + assert.equal( element.css( "touch-action" ), "auto", "touch-action: disabled true" ); element.draggable( "option", "disabled", false ); testHelper.shouldMove( assert, element, "option: disabled false" ); + assert.equal( element.css( "touch-action" ), "none", "touch-action: disabled false" ); } ); QUnit.test( "{ grid: [50, 50] }, relative", function( assert ) { diff --git a/themes/base/draggable.css b/themes/base/draggable.css index f2000c45656..88f09ec52fc 100644 --- a/themes/base/draggable.css +++ b/themes/base/draggable.css @@ -6,7 +6,7 @@ * Released under the MIT license. * http://jquery.org/license */ -.ui-draggable-handle { +.ui-draggable-handle-enabled { -ms-touch-action: none; touch-action: none; } diff --git a/ui/widgets/draggable.js b/ui/widgets/draggable.js index 8597f143b93..cefca0e9a81 100644 --- a/ui/widgets/draggable.js +++ b/ui/widgets/draggable.js @@ -78,10 +78,9 @@ $.widget( "ui.draggable", $.ui.mouse, { if ( this.options.addClasses ) { this._addClass( "ui-draggable" ); } - - this.handleElement = $(); + this._setHandleClassName(); if ( !this.options.disabled ) { - this._setHandleClassName(); + this._addClass( this.handleElement, "ui-draggable-handle-enabled" ); } this._mouseInit(); @@ -96,11 +95,11 @@ $.widget( "ui.draggable", $.ui.mouse, { }, _setOptionDisabled: function( value ) { - // Remove the handle class when disabled since that controls touch-action + // Remove touch-action for disabled draggables if ( value ) { - this._removeHandleClassName(); + this._removeClass( this.handleElement, "ui-draggable-handle-enabled" ); } else { - this._setHandleClassName(); + this._addClass( this.handleElement, "ui-draggable-handle-enabled" ); } }, From 9bfdca277c0f5ba2c4fc8f1109e31fd27696b3b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Scott=20Gonz=C3=A1lez?= Date: Wed, 5 Oct 2016 13:13:27 -0400 Subject: [PATCH 3/3] fixup! fixup: New implementation --- ui/widgets/draggable.js | 1 + 1 file changed, 1 insertion(+) diff --git a/ui/widgets/draggable.js b/ui/widgets/draggable.js index cefca0e9a81..88d62745172 100644 --- a/ui/widgets/draggable.js +++ b/ui/widgets/draggable.js @@ -95,6 +95,7 @@ $.widget( "ui.draggable", $.ui.mouse, { }, _setOptionDisabled: function( value ) { + // Remove touch-action for disabled draggables if ( value ) { this._removeClass( this.handleElement, "ui-draggable-handle-enabled" );