Slider & Interactions: Add Windows 8 touch support

Fixes #9709
Fixes #9710
Closes jquerygh-1152

Author: tjvantoll

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 = $( "<div><p></p></div>" ).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 );

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 = "<li><p></p></li>",
+		el = $( "<ul>" + item + item + "</ul>" )
+			.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 );

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");

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;
+}

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 {

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;

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;

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;
+}

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,

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;
 	},