diff --git a/tests/unit/draggable/draggable_core.js b/tests/unit/draggable/draggable_core.js index c9cdde2606b..7df0969b1a5 100644 --- a/tests/unit/draggable/draggable_core.js +++ b/tests/unit/draggable/draggable_core.js @@ -273,4 +273,18 @@ asyncTest( "#4261: active element should blur when mousing down on a draggable", }); }); +test( "ui-draggable-handle assigned to appropriate element", function() { + expect( 4 ); + + var element = $( "

" ).appendTo( "#qunit-fixture" ).draggable(); + ok( element.hasClass( "ui-draggable-handle" ), "handle is element by default" ); + + element.draggable( "option", "handle", "p" ); + ok( !element.hasClass( "ui-draggable-handle" ), "removed from element" ); + ok( element.find( "p" ).hasClass( "ui-draggable-handle" ), "added to handle" ); + + element.draggable( "destroy" ); + ok( !element.find( "p" ).hasClass( "ui-draggable-handle" ), "removed in destroy()" ); +}); + })( jQuery ); diff --git a/tests/unit/sortable/sortable_core.js b/tests/unit/sortable/sortable_core.js index 18e7dae0864..54069a9bfbd 100644 --- a/tests/unit/sortable/sortable_core.js +++ b/tests/unit/sortable/sortable_core.js @@ -16,4 +16,25 @@ test( "#9314: Sortable: Items cannot be dragged directly into bottom position", TestHelpers.sortable.sort( $( "li", el[ 1 ] )[ 0 ], 0, -12, 5, "Dragging the sortable into connected sortable" ); }); +test( "ui-sortable-handle applied to appropriate element", function() { + expect( 6 ); + var item = "
  • ", + el = $( "" ) + .sortable() + .appendTo( "#qunit-fixture" ); + + ok( el.find( "li:first" ).hasClass( "ui-sortable-handle" ), "defaults to item" ); + ok( el.find( "li:last" ).hasClass( "ui-sortable-handle" ), "both items received class name" ); + + el.sortable( "option", "handle", "p" ); + ok( !el.find( "li" ).hasClass( "ui-sortable-handle" ), "removed on change" ); + ok( el.find( "p" ).hasClass( "ui-sortable-handle" ), "applied to handle" ); + + el.append( item ).sortable( "refresh" ); + ok( el.find( "p:last" ).hasClass( "ui-sortable-handle" ), "class name applied on refresh" ); + + el.sortable( "destroy" ); + equal( el.find( ".ui-sortable-handle" ).length, 0, "class name removed on destroy" ); +}); + })( jQuery ); diff --git a/themes/base/jquery.ui.base.css b/themes/base/jquery.ui.base.css index aefa81de414..8ff61a51189 100644 --- a/themes/base/jquery.ui.base.css +++ b/themes/base/jquery.ui.base.css @@ -15,11 +15,13 @@ @import url("jquery.ui.button.css"); @import url("jquery.ui.datepicker.css"); @import url("jquery.ui.dialog.css"); +@import url("jquery.ui.draggable.css"); @import url("jquery.ui.menu.css"); @import url("jquery.ui.progressbar.css"); @import url("jquery.ui.resizable.css"); @import url("jquery.ui.selectable.css"); @import url("jquery.ui.selectmenu.css"); +@import url("jquery.ui.sortable.css"); @import url("jquery.ui.slider.css"); @import url("jquery.ui.spinner.css"); @import url("jquery.ui.tabs.css"); diff --git a/themes/base/jquery.ui.draggable.css b/themes/base/jquery.ui.draggable.css new file mode 100644 index 00000000000..707134e784a --- /dev/null +++ b/themes/base/jquery.ui.draggable.css @@ -0,0 +1,12 @@ +/*! + * jQuery UI Draggable @VERSION + * http://jqueryui.com + * + * Copyright 2013 jQuery Foundation and other contributors + * Released under the MIT license. + * http://jquery.org/license + */ +.ui-draggable-handle { + -ms-touch-action: none; + touch-action: none; +} diff --git a/themes/base/jquery.ui.resizable.css b/themes/base/jquery.ui.resizable.css index f0f8c474de0..23ec832ebf1 100644 --- a/themes/base/jquery.ui.resizable.css +++ b/themes/base/jquery.ui.resizable.css @@ -13,6 +13,8 @@ position: absolute; font-size: 0.1px; display: block; + -ms-touch-action: none; + touch-action: none; } .ui-resizable-disabled .ui-resizable-handle, .ui-resizable-autohide .ui-resizable-handle { diff --git a/themes/base/jquery.ui.selectable.css b/themes/base/jquery.ui.selectable.css index d44ad46cf65..4fae8d149b9 100644 --- a/themes/base/jquery.ui.selectable.css +++ b/themes/base/jquery.ui.selectable.css @@ -6,6 +6,10 @@ * Released under the MIT license. * http://jquery.org/license */ +.ui-selectable { + -ms-touch-action: none; + touch-action: none; +} .ui-selectable-helper { position: absolute; z-index: 100; diff --git a/themes/base/jquery.ui.slider.css b/themes/base/jquery.ui.slider.css index b6b68b8b0e8..91bc1a048fa 100644 --- a/themes/base/jquery.ui.slider.css +++ b/themes/base/jquery.ui.slider.css @@ -18,6 +18,8 @@ width: 1.2em; height: 1.2em; cursor: default; + -ms-touch-action: none; + touch-action: none; } .ui-slider .ui-slider-range { position: absolute; diff --git a/themes/base/jquery.ui.sortable.css b/themes/base/jquery.ui.sortable.css new file mode 100644 index 00000000000..139c705db8d --- /dev/null +++ b/themes/base/jquery.ui.sortable.css @@ -0,0 +1,12 @@ +/*! + * jQuery UI Sortable @VERSION + * http://jqueryui.com + * + * Copyright 2013 jQuery Foundation and other contributors + * Released under the MIT license. + * http://jquery.org/license + */ +.ui-sortable-handle { + -ms-touch-action: none; + touch-action: none; +} diff --git a/ui/jquery.ui.draggable.js b/ui/jquery.ui.draggable.js index f18b383d39d..5cbe92fced7 100644 --- a/ui/jquery.ui.draggable.js +++ b/ui/jquery.ui.draggable.js @@ -60,9 +60,16 @@ $.widget("ui.draggable", $.ui.mouse, { if (this.options.disabled){ this.element.addClass("ui-draggable-disabled"); } + this._setHandleClassName(); this._mouseInit(); + }, + _setOption: function( key, value ) { + this._super( key, value ); + if ( key === "handle" ) { + this._setHandleClassName(); + } }, _destroy: function() { @@ -71,6 +78,7 @@ $.widget("ui.draggable", $.ui.mouse, { return; } this.element.removeClass( "ui-draggable ui-draggable-dragging ui-draggable-disabled" ); + this._removeHandleClassName(); this._mouseDestroy(); }, @@ -296,6 +304,17 @@ $.widget("ui.draggable", $.ui.mouse, { true; }, + _setHandleClassName: function() { + this._removeHandleClassName(); + $( this.options.handle || this.element ).addClass( "ui-draggable-handle" ); + }, + + _removeHandleClassName: function() { + this.element.find( ".ui-draggable-handle" ) + .addBack() + .removeClass( "ui-draggable-handle" ); + }, + _createHelper: function(event) { var o = this.options, diff --git a/ui/jquery.ui.sortable.js b/ui/jquery.ui.sortable.js index 29c25f39017..01e644f44ec 100644 --- a/ui/jquery.ui.sortable.js +++ b/ui/jquery.ui.sortable.js @@ -84,14 +84,35 @@ $.widget("ui.sortable", $.ui.mouse, { //Initialize mouse events for interaction this._mouseInit(); + this._setHandleClassName(); + //We're ready to go this.ready = true; }, + _setOption: function( key, value ) { + this._super( key, value ); + + if ( key === "handle" ) { + this._setHandleClassName(); + } + }, + + _setHandleClassName: function() { + this.element.find( ".ui-sortable-handle" ).removeClass( "ui-sortable-handle" ); + $.each( this.items, function() { + ( this.instance.options.handle ? + this.item.find( this.instance.options.handle ) : this.item ) + .addClass( "ui-sortable-handle" ); + }); + }, + _destroy: function() { this.element - .removeClass("ui-sortable ui-sortable-disabled"); + .removeClass( "ui-sortable ui-sortable-disabled" ) + .find( ".ui-sortable-handle" ) + .removeClass( "ui-sortable-handle" ); this._mouseDestroy(); for ( var i = this.items.length - 1; i >= 0; i-- ) { @@ -598,6 +619,7 @@ $.widget("ui.sortable", $.ui.mouse, { refresh: function(event) { this._refreshItems(event); + this._setHandleClassName(); this.refreshPositions(); return this; },