diff --git a/Gruntfile.js b/Gruntfile.js
index 545329df039..ac9fa9cb8e9 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -8,6 +8,7 @@ var
 		"core.js",
 		"widget.js",
 		"mouse.js",
+		"interaction.js",
 		"draggable.js",
 		"droppable.js",
 		"resizable.js",
diff --git a/demos/draggable/closedhand.cur b/demos/draggable/closedhand.cur
new file mode 100755
index 00000000000..41aaa62a596
Binary files /dev/null and b/demos/draggable/closedhand.cur differ
diff --git a/demos/draggable/constrain-movement.html b/demos/draggable/constrain-movement.html
index 1dcab0213fc..e46fb7b27ba 100644
--- a/demos/draggable/constrain-movement.html
+++ b/demos/draggable/constrain-movement.html
@@ -7,7 +7,7 @@
 	<script src="../../jquery-1.10.2.js"></script>
 	<script src="../../ui/core.js"></script>
 	<script src="../../ui/widget.js"></script>
-	<script src="../../ui/mouse.js"></script>
+	<script src="../../ui/interaction.js"></script>
 	<script src="../../ui/draggable.js"></script>
 	<link rel="stylesheet" href="../demos.css">
 	<style>
@@ -20,10 +20,19 @@
 	</style>
 	<script>
 	$(function() {
-		$( "#draggable" ).draggable({ axis: "y" });
-		$( "#draggable2" ).draggable({ axis: "x" });
+		$( "#draggable" ).draggable({
+			drag: function( event, ui ) {
+				ui.position.left = ui.originalPosition.left;
+			}
+		});
+		$( "#draggable2" ).draggable({
+			drag: function( event, ui ) {
+				ui.position.top = ui.originalPosition.top;
+			}
+		});
 
-		$( "#draggable3" ).draggable({ containment: "#containment-wrapper", scroll: false });
+		$( "#draggable3" ).draggable({ containment: "#containment-wrapper" });
+		$( "#draggable4" ).draggable({ containment: "#demo-frame" });
 		$( "#draggable5" ).draggable({ containment: "parent" });
 	});
 	</script>
@@ -52,7 +61,8 @@ <h3>Or to within another DOM element:</h3>
 </div>
 
 <div class="demo-description">
-<p>Constrain the movement of each draggable by defining the boundaries of the draggable area. Set the <code>axis</code> option to limit the draggable's path to the x- or y-axis, or use the <code>containment</code> option to specify a parent DOM element or a jQuery selector, like 'document.'</p>
+<p>Constrain the movement of each draggable by defining the boundaries of the draggable area. The <code>containment</code> option allows you to specify any element to use as a containing box; you can pass any selector or the string "parent".</p>
+<p>The draggable element can also be constrained with custom logic inside a drag event handler. Modifying the <code>ui.position</code> object's <code>left</code> and/or <code>top</code> properties will change where the element will be positioned. In this example, we're forcing the top or left to always be the same as where it started, resulting in the element being confined to a specific axis.</p>
 </div>
 </body>
 </html>
diff --git a/demos/draggable/cursor-style.html b/demos/draggable/cursor-style.html
index 426123644c0..7a979187341 100644
--- a/demos/draggable/cursor-style.html
+++ b/demos/draggable/cursor-style.html
@@ -7,36 +7,65 @@
 	<script src="../../jquery-1.10.2.js"></script>
 	<script src="../../ui/core.js"></script>
 	<script src="../../ui/widget.js"></script>
-	<script src="../../ui/mouse.js"></script>
+	<script src="../../ui/interaction.js"></script>
 	<script src="../../ui/draggable.js"></script>
 	<link rel="stylesheet" href="../demos.css">
 	<style>
 	#draggable, #draggable2, #draggable3 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
 	</style>
 	<script>
+	$.ui.draggable.prototype.options.cursorAt = null;
+	$( document ).bind( "dragbeforestart", function( event, ui ) {
+		var cursorAt, elem,
+			draggable = $( event.target ).data( "draggable" );
+
+		if ( !draggable || !draggable.options.cursorAt ) {
+			return;
+		}
+
+		elem = ui.helper || draggable.element;
+		cursorAt = draggable.options.cursorAt;
+		if ( "top" in cursorAt ) {
+			ui.position.top += ui.pointer.y - ui.offset.top - cursorAt.top;
+		}
+		if ( "left" in cursorAt ) {
+			ui.position.left += ui.pointer.x - ui.offset.left - cursorAt.left;
+		}
+		if ( "bottom" in cursorAt ) {
+			ui.position.top += ui.pointer.y - ui.offset.top - elem.outerHeight() + cursorAt.bottom;
+		}
+		if ( "right" in cursorAt ) {
+			ui.position.left += ui.pointer.x - ui.offset.left - elem.outerWidth() + cursorAt.right;
+		}
+	});
+
 	$(function() {
-		$( "#draggable" ).draggable({ cursor: "move", cursorAt: { top: 56, left: 56 } });
-		$( "#draggable2" ).draggable({ cursor: "crosshair", cursorAt: { top: -5, left: -5 } });
-		$( "#draggable3" ).draggable({ cursorAt: { bottom: 0 } });
+		$( "#draggable" ).draggable({
+			beforeStart: function( event, ui ) {
+				ui.position.top += ui.pointer.y - ui.offset.top - $( event.target ).outerHeight() / 2;
+				ui.position.left += ui.pointer.x - ui.offset.left - $( event.target ).outerWidth() / 2;
+			}
+		});
+		$( "#draggable2" ).draggable({
+			beforeStart: function( event, ui ) {
+				ui.position.top += ui.pointer.y - ui.offset.top;
+			}
+		});
 	});
 	</script>
 </head>
 <body>
 
 <div id="draggable" class="ui-widget-content">
-	<p>I will always stick to the center (relative to the mouse)</p>
+	<p>I will always stick to the center (relative to the pointer)</p>
 </div>
 
 <div id="draggable2" class="ui-widget-content">
-	<p>My cursor is at left -5 and top -5</p>
-</div>
-
-<div id="draggable3" class="ui-widget-content">
-	<p>My cursor position is only controlled for the 'bottom' value</p>
+	<p>My cursor position is always at the top</p>
 </div>
 
 <div class="demo-description">
-<p>Position the cursor while dragging the object. By default the cursor appears in the center of the dragged object; use the <code>cursorAt</code> option to specify another location relative to the draggable (specify a pixel value from the top, right, bottom, and/or left).  Customize the cursor's appearance by supplying the <code>cursor</code> option with a valid CSS cursor value: default, move, pointer, crosshair, etc.</p>
+<p>The <code>beforeStart</code> callback allows you to position the draggable element in order to adjust where the draggable movements will be calculated from. In this example, we adjust the position to control where the element is relative to the pointer during the drag.</p>
 </div>
 </body>
 </html>
diff --git a/demos/draggable/default.html b/demos/draggable/default.html
index 283a5964985..1676dddc9c9 100644
--- a/demos/draggable/default.html
+++ b/demos/draggable/default.html
@@ -7,7 +7,7 @@
 	<script src="../../jquery-1.10.2.js"></script>
 	<script src="../../ui/core.js"></script>
 	<script src="../../ui/widget.js"></script>
-	<script src="../../ui/mouse.js"></script>
+	<script src="../../ui/interaction.js"></script>
 	<script src="../../ui/draggable.js"></script>
 	<link rel="stylesheet" href="../demos.css">
 	<style>
diff --git a/demos/draggable/delay-start.html b/demos/draggable/delay-start.html
index 16df485eb30..7bf341dd7c3 100644
--- a/demos/draggable/delay-start.html
+++ b/demos/draggable/delay-start.html
@@ -7,7 +7,7 @@
 	<script src="../../jquery-1.10.2.js"></script>
 	<script src="../../ui/core.js"></script>
 	<script src="../../ui/widget.js"></script>
-	<script src="../../ui/mouse.js"></script>
+	<script src="../../ui/interaction.js"></script>
 	<script src="../../ui/draggable.js"></script>
 	<link rel="stylesheet" href="../demos.css">
 	<style>
diff --git a/demos/draggable/events.html b/demos/draggable/events.html
index caf392e218b..8c7b0260716 100644
--- a/demos/draggable/events.html
+++ b/demos/draggable/events.html
@@ -7,46 +7,39 @@
 	<script src="../../jquery-1.10.2.js"></script>
 	<script src="../../ui/core.js"></script>
 	<script src="../../ui/widget.js"></script>
-	<script src="../../ui/mouse.js"></script>
+	<script src="../../ui/interaction.js"></script>
 	<script src="../../ui/draggable.js"></script>
 	<link rel="stylesheet" href="../demos.css">
 	<style>
 	#draggable { width: 16em; padding: 0 1em; }
-	#draggable ul li { margin: 1em 0; padding: 0.5em 0; } * html #draggable ul li { height: 1%; }
-	#draggable ul li span.ui-icon { float: left; }
-	#draggable ul li span.count { font-weight: bold; }
+	#draggable li { margin: 1em 0; padding: 0.5em 0; }
+	* html #draggable ul li { height: 1%; }
+	#draggable li .ui-icon { float: left; }
+	#draggable li .count { font-weight: bold; }
 	</style>
 	<script>
 	$(function() {
-		var $start_counter = $( "#event-start" ),
-			$drag_counter = $( "#event-drag" ),
-			$stop_counter = $( "#event-stop" ),
-			counts = [ 0, 0, 0 ];
+		var startCount = $( "#event-start .count" ),
+			dragCount = $( "#event-drag .count" ),
+			stopCount = $( "#event-stop .count" );
 
 		$( "#draggable" ).draggable({
 			start: function() {
-				counts[ 0 ]++;
-				updateCounterStatus( $start_counter, counts[ 0 ] );
+				startCount.text(function( i, current ) {
+					return parseInt( current, 10 ) + 1;
+				});
 			},
 			drag: function() {
-				counts[ 1 ]++;
-				updateCounterStatus( $drag_counter, counts[ 1 ] );
+				dragCount.text(function( i, current ) {
+					return parseInt( current, 10 ) + 1;
+				});
 			},
 			stop: function() {
-				counts[ 2 ]++;
-				updateCounterStatus( $stop_counter, counts[ 2 ] );
+				stopCount.text(function( i, current ) {
+					return parseInt( current, 10 ) + 1;
+				});
 			}
 		});
-
-		function updateCounterStatus( $event_counter, new_count ) {
-			// first update the status visually...
-			if ( !$event_counter.hasClass( "ui-state-hover" ) ) {
-				$event_counter.addClass( "ui-state-hover" )
-					.siblings().removeClass( "ui-state-hover" );
-			}
-			// ...then update the numbers
-			$( "span.count", $event_counter ).text( new_count );
-		}
 	});
 	</script>
 </head>
diff --git a/demos/draggable/handle.html b/demos/draggable/handle.html
index 7c3690ea6fa..d8aa57b52d6 100644
--- a/demos/draggable/handle.html
+++ b/demos/draggable/handle.html
@@ -7,7 +7,7 @@
 	<script src="../../jquery-1.10.2.js"></script>
 	<script src="../../ui/core.js"></script>
 	<script src="../../ui/widget.js"></script>
-	<script src="../../ui/mouse.js"></script>
+	<script src="../../ui/interaction.js"></script>
 	<script src="../../ui/draggable.js"></script>
 	<link rel="stylesheet" href="../demos.css">
 	<style>
@@ -15,10 +15,22 @@
 	#draggable p { cursor: move; }
 	</style>
 	<script>
+	$.widget( "ui.draggable", $.ui.draggable, {
+		options: {
+			cancel: null
+		},
+		_isValidTarget: function( element ) {
+			var valid = this._super( element );
+			if ( valid && this.options.cancel ) {
+				valid = !element.is( this.options.cancel );
+			}
+			return valid;
+		}
+	});
+
 	$(function() {
 		$( "#draggable" ).draggable({ handle: "p" });
 		$( "#draggable2" ).draggable({ cancel: "p.ui-widget-header" });
-		$( "div, p" ).disableSelection();
 	});
 	</script>
 </head>
@@ -30,11 +42,11 @@
 
 <div id="draggable2" class="ui-widget-content">
 	<p>You can drag me around&hellip;</p>
-	<p class="ui-widget-header">&hellip;but you can't drag me by this handle.</p>
+	<p class="ui-widget-header">&hellip;but you can't drag me by this element.</p>
 </div>
 
 <div class="demo-description">
-<p>Allow dragging only when the cursor is over a specific part of the draggable.  Use the <code>handle</code> option to specify the jQuery selector of an element (or group of elements) used to drag the object.</p>
+<p>Allow dragging only when the cursor is over a specific part of the draggable. Use the <code>handle</code> option to specify the jQuery selector of an element (or group of elements) used to drag the object.</p>
 <p>Or prevent dragging when the cursor is over a specific element (or group of elements) within the draggable.  Use the <code>cancel</code> option to specify a jQuery selector over which to "cancel" draggable functionality.</p>
 </div>
 </body>
diff --git a/demos/draggable/index.html b/demos/draggable/index.html
index 93850684d67..9a63a5ff322 100644
--- a/demos/draggable/index.html
+++ b/demos/draggable/index.html
@@ -11,13 +11,14 @@
 	<li><a href="events.html">Events</a></li>
 	<li><a href="constrain-movement.html">Constrain movement</a></li>
 	<li><a href="delay-start.html">Delay start</a></li>
-	<li><a href="snap-to.html">Snap to element or grid</a></li>
+	<li><a href="snap-to.html">Snap to element or&#160;grid</a></li>
 	<li><a href="scroll.html">Auto-scroll</a></li>
 	<li><a href="revert.html">Revert position</a></li>
 	<li><a href="visual-feedback.html">Visual feedback</a></li>
 	<li><a href="handle.html">Drag handle</a></li>
 	<li><a href="cursor-style.html">Cursor style</a></li>
 	<li><a href="sortable.html">Draggable + Sortable</a></li>
+	<li><a href="map.html">Draggable Map</a></li>
 </ul>
 
 </body>
diff --git a/demos/draggable/map.html b/demos/draggable/map.html
new file mode 100644
index 00000000000..dfead48bf91
--- /dev/null
+++ b/demos/draggable/map.html
@@ -0,0 +1,73 @@
+<!doctype html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
+	<title>jQuery UI Draggable - Draggable Map</title>
+	<link rel="stylesheet" href="../../themes/base/all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/core.js"></script>
+	<script src="../../ui/widget.js"></script>
+	<script src="../../ui/interaction.js"></script>
+	<script src="../../ui/draggable.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	html, body, .demo { height: 90%; }
+	#map { width: 100%; height: 100%; max-width: 320px; overflow: hidden; position: relative; }
+	#map img { position: absolute; cursor: pointer; }
+	#map .ui-draggable-dragging { cursor: url('closedhand.cur'), move; }
+	</style>
+	<script>
+	$(window).load(function() {
+		var viewport = $("#map");
+		var img = viewport.find("img");
+		var viewWidth = viewport.width();
+        var viewHeight = viewport.height();
+        var imgWidth = img.width();
+        var imgHeight = img.height();
+        var leftMax = imgWidth - viewWidth;
+        var topMax = imgHeight - viewHeight;
+		img.draggable({
+			start: function() {
+				$(this).addClass("ui-draggable-dragging");
+			},
+			stop: function() {
+				$(this).removeClass("ui-draggable-dragging");
+			},
+			drag: function(event, ui) {
+				if (viewWidth > imgWidth) {
+					// center when there's just one image
+					ui.position.left = viewWidth / 2 - imgWidth / 2;
+				} else {
+					if (ui.position.left > 0) {
+						ui.position.left = 0;
+					} else if (ui.position.left + imgWidth < viewWidth) {
+						ui.position.left = -leftMax;
+					}
+				}
+				if (viewHeight > imgHeight) {
+					// center when the view is bigger then the image
+					ui.position.top = viewHeight / 2 - imgHeight / 2;
+				} else {
+					if (ui.position.top > 0) {
+						ui.position.top = 0;
+					} else if (ui.position.top + imgHeight < viewHeight) {
+						ui.position.top = -topMax;
+					}
+				}
+			}
+		});
+	});
+	</script>
+</head>
+<body>
+
+<div id="map" class="ui-widget-content">
+	<img src="http://maps.google.com/maps/api/staticmap?zoom=11&amp;size=640x640&amp;maptype=terrain&amp;sensor=false&amp;center=Vienna" alt="Map of Vienna">
+</div>
+
+<div class="demo-description">
+<p>Drag the map around inside the viewport. Works with touch devices. The container is kept small for the demo to work.</p>
+</div>
+</body>
+</html>
diff --git a/demos/draggable/revert.html b/demos/draggable/revert.html
index 7ccccdf55dd..121aeef74ac 100644
--- a/demos/draggable/revert.html
+++ b/demos/draggable/revert.html
@@ -7,16 +7,29 @@
 	<script src="../../jquery-1.10.2.js"></script>
 	<script src="../../ui/core.js"></script>
 	<script src="../../ui/widget.js"></script>
-	<script src="../../ui/mouse.js"></script>
+	<script src="../../ui/interaction.js"></script>
 	<script src="../../ui/draggable.js"></script>
 	<link rel="stylesheet" href="../demos.css">
 	<style>
-	#draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
+	.ui-draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
 	</style>
 	<script>
 	$(function() {
-		$( "#draggable" ).draggable({ revert: true });
-		$( "#draggable2" ).draggable({ revert: true, helper: "clone" });
+		$( "#draggable" ).draggable({
+			stop: function( event, ui ) {
+				$( event.target ).animate( ui.originalPosition );
+			}
+		});
+		$( "#draggable2" ).draggable({
+			helper: true,
+			stop: function( event, ui ) {
+				ui.helper.animate( ui.originalPosition, function() {
+					ui.helper.remove();
+				});
+				// prevent the draggable plugin from removing the helper
+				event.preventDefault();
+			}
+		});
 	});
 	</script>
 </head>
@@ -31,7 +44,7 @@
 </div>
 
 <div class="demo-description">
-<p>Return the draggable (or it's helper) to its original location when dragging stops with the boolean <code>revert</code> option.</p>
+<p>The <code>stop</code> callback can be used to perform an action after the user finishing dragging the element. For example, if you want to return the draggable (or it's helper) to its original location when dragging stops, you can do so in the <code>stop</code> callback.</p>
 </div>
 </body>
 </html>
diff --git a/demos/draggable/visual-feedback.html b/demos/draggable/visual-feedback.html
index d90d4842c5d..28d58b57358 100644
--- a/demos/draggable/visual-feedback.html
+++ b/demos/draggable/visual-feedback.html
@@ -7,23 +7,21 @@
 	<script src="../../jquery-1.10.2.js"></script>
 	<script src="../../ui/core.js"></script>
 	<script src="../../ui/widget.js"></script>
-	<script src="../../ui/mouse.js"></script>
+	<script src="../../ui/interaction.js"></script>
 	<script src="../../ui/draggable.js"></script>
 	<link rel="stylesheet" href="../demos.css">
 	<style>
-	#draggable, #draggable2, #draggable3, #set div { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
+	.ui-draggable { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 0 10px 10px 0; }
 	#draggable, #draggable2, #draggable3 { margin-bottom:20px; }
 	#set { clear:both; float:left; width: 368px; height: 120px; }
 	p { clear:both; margin:0; padding:1em 0; }
 	</style>
 	<script>
 	$(function() {
-		$( "#draggable" ).draggable({ helper: "original" });
-		$( "#draggable2" ).draggable({ opacity: 0.7, helper: "clone" });
+		$( "#draggable" ).draggable();
+		$( "#draggable2" ).draggable({ helper: true });
 		$( "#draggable3" ).draggable({
-			cursor: "move",
-			cursorAt: { top: -12, left: -20 },
-			helper: function( event ) {
+			helper: function() {
 				return $( "<div class='ui-widget-header'>I'm a custom helper</div>" );
 			}
 		});
@@ -33,21 +31,22 @@
 </head>
 <body>
 
-<h3 class="docs">With helpers:</h3>
+<h3>With helpers:</h3>
 
 <div id="draggable" class="ui-widget-content">
 	<p>Original</p>
 </div>
 
 <div id="draggable2" class="ui-widget-content">
-	<p>Semi-transparent clone</p>
+	<p>Cloned helper</p>
 </div>
 
 <div id="draggable3" class="ui-widget-content">
-	<p>Custom helper (in combination with cursorAt)</p>
+	<p>Custom helper</p>
 </div>
 
-<h3 class="docs">Stacked:</h3>
+<h3>Stacked:</h3>
+
 <div id="set">
 	<div class="ui-widget-content">
 		<p>We are draggables..</p>
@@ -63,8 +62,7 @@ <h3 class="docs">Stacked:</h3>
 </div>
 
 <div class="demo-description">
-<p>Provide feedback to users as they drag an object in the form of a helper. The <code>helper</code> option accepts the values 'original' (the draggable object moves with the cursor), 'clone' (a duplicate of the draggable moves with the cursor), or a function that returns a DOM element (that element is shown near the cursor during drag). Control the helper's transparency with the <code>opacity</code> option.</p>
-<p>To clarify which draggable is in play, bring the draggable in motion to front. Use the <code>zIndex</code> option to set a higher z-index for the helper, if in play, or use the <code>stack</code> option to ensure that the last item dragged will appear on top of others in the same group on drag stop.</p>
+<p>Provide feedback to users as they drag an element in the form of a helper. The <code>helper</code> option accepts the values false/null (the draggable element moves with the cursor), true (a clone of the draggable moves with the cursor), or a function that returns a DOM element or jQuery object (that element is shown near the cursor during drag).</p>
 </div>
 </body>
 </html>
diff --git a/demos/droppable/default.html b/demos/droppable/default.html
index be3603eb8fe..d341f019ab9 100644
--- a/demos/droppable/default.html
+++ b/demos/droppable/default.html
@@ -7,7 +7,7 @@
 	<script src="../../jquery-1.10.2.js"></script>
 	<script src="../../ui/core.js"></script>
 	<script src="../../ui/widget.js"></script>
-	<script src="../../ui/mouse.js"></script>
+	<script src="../../ui/interaction.js"></script>
 	<script src="../../ui/draggable.js"></script>
 	<script src="../../ui/droppable.js"></script>
 	<link rel="stylesheet" href="../demos.css">
diff --git a/demos/interaction/box.html b/demos/interaction/box.html
new file mode 100644
index 00000000000..ee4c98cd34d
--- /dev/null
+++ b/demos/interaction/box.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Interaction - Box</title>
+	<link rel="stylesheet" href="../../themes/base/all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/core.js"></script>
+	<script src="../../ui/widget.js"></script>
+	<script src="../../ui/interaction.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#canvas { width: 300px; height: 200px; border: 1px solid black; }
+	.demo-box { border: 1px dotted black; width: 0; height: 0; }
+	.demo-box-complete { border-color: gray; background: lightBlue; }
+	</style>
+	<script>
+	$(function() {
+		$.widget( "demo.box", $.ui.interaction, {
+			_start: function( event, pointerPosition ) {
+				this.startPosition = pointerPosition;
+
+				this.box = $( "<div>" )
+					.appendTo( this.element.empty() )
+					.addClass( "demo-box" )
+					.offset({
+						left: pointerPosition.x,
+						top: pointerPosition.y
+					});
+			},
+
+			_move: function( event, pointerPosition ) {
+				var x1 = this.startPosition.x,
+					y1 = this.startPosition.y,
+					x2 = pointerPosition.x,
+					y2 = pointerPosition.y;
+
+				this.box
+					.offset({
+						left: Math.min( x1, x2 ),
+						top: Math.min( y1, y2 )
+					})
+					.css({
+						width: x1 > x2 ? x1 - x2 : x2 - x1,
+						height: y1 > y2 ? y1 - y2 : y2 - y1
+					});
+			},
+
+			_stop: function() {
+				this.box.addClass( "demo-box-complete" );
+			}
+		});
+
+		$( "#canvas" ).box();
+	});
+	</script>
+</head>
+<body>
+
+<div class="demo">
+
+<div id="canvas"></div>
+
+</div><!-- End demo -->
+
+
+<div class="demo-description">
+<p>This demo shows how you can create a simple box-drawing (aka lasso) interaction built on top of the interaction utility (interaction.js).</p>
+<p>Draw a box by starting in the box above using the mouse or a touch input device.</p>
+</div><!-- End demo-description -->
+
+</body>
+</html>
diff --git a/demos/interaction/default.html b/demos/interaction/default.html
new file mode 100644
index 00000000000..2b8b92bb07b
--- /dev/null
+++ b/demos/interaction/default.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Interaction - Default functionality</title>
+	<link rel="stylesheet" href="../../themes/base/all.css">
+	<script src="../../jquery-1.10.2.js"></script>
+	<script src="../../ui/core.js"></script>
+	<script src="../../ui/widget.js"></script>
+	<script src="../../ui/interaction.js"></script>
+	<link rel="stylesheet" href="../demos.css">
+	<style>
+	#startmovestop { width: 200px; height: 100px; background: lightBlue; }
+	</style>
+	<script>
+	$(function() {
+		$.widget( "demo.startmovestop", $.ui.interaction, {
+			_start: function() {
+				$( "#startcount" ).text(function( i, current ) {
+					return parseInt( current, 10 ) + 1;
+				});
+			},
+			_move: function() {
+				$( "#movecount" ).text(function( i, current ) {
+					return parseInt( current, 10 ) + 1;
+				});
+			},
+			_stop: function() {
+				$( "#stopcount" ).text(function( i, current ) {
+					return parseInt( current, 10 ) + 1;
+				});
+			}
+		});
+
+		$( "#startmovestop" ).startmovestop();
+	});
+	</script>
+</head>
+<body>
+
+<div class="demo">
+
+<div id="startmovestop"></div>
+
+<dl>
+	<dt>Start:</dt>
+		<dd id="startcount">0</dd>
+	<dt>Move:</dt>
+		<dd id="movecount">0</dd>
+	<dt>Stop:</dt>
+		<dd id="stopcount">0</dd>
+</dl>
+
+</div><!-- End demo -->
+
+
+<div class="demo-description">
+<p>This demo shows a simple interaction built using the interaction utility (jquery.ui.interaction.js).</p>
+<p>Make a down-move-up motion starting on the blue box above using the mouse or a touch input device to see the interaction events</p>
+</div><!-- End demo-description -->
+
+</body>
+</html>
diff --git a/demos/interaction/index.html b/demos/interaction/index.html
new file mode 100644
index 00000000000..4666b3b1d93
--- /dev/null
+++ b/demos/interaction/index.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="utf-8">
+	<title>jQuery UI Interaction Demo</title>
+	<link rel="stylesheet" href="../demos.css">
+</head>
+<body>
+
+<div class="demos-nav">
+	<h4>Examples</h4>
+	<ul>
+		<li class="demo-config-on"><a href="default.html">Default functionality</a></li>
+		<li class="demo-config-on"><a href="box.html">Box</a></li>
+	</ul>
+</div>
+
+</body>
+</html>
diff --git a/tests/unit/draggable/draggable.html b/tests/unit/draggable/draggable.html
index 02977c6cc5f..1a381e314a1 100644
--- a/tests/unit/draggable/draggable.html
+++ b/tests/unit/draggable/draggable.html
@@ -58,6 +58,7 @@
 			"ui/core.js",
 			"ui/widget.js",
 			"ui/mouse.js",
+			"ui/interaction.js",
 			"ui/resizable.js",
 			"ui/draggable.js",
 			"ui/droppable.js"
@@ -65,6 +66,7 @@
 	});
 	</script>
 
+
 	<script src="draggable_common.js"></script>
 	<script src="draggable_core.js"></script>
 	<script src="draggable_events.js"></script>
diff --git a/tests/unit/draggable/draggable_common.js b/tests/unit/draggable/draggable_common.js
index 5abd09e4935..e374e20ea6e 100644
--- a/tests/unit/draggable/draggable_common.js
+++ b/tests/unit/draggable/draggable_common.js
@@ -1,16 +1,19 @@
 TestHelpers.commonWidgetTests( "draggable", {
 	defaults: {
-		appendTo: "parent",
+		// options
+		appendTo: null,
+		containment: null,
+		disabled: false,
+		exclude: "input,textarea,button,select",
+		handle: null,
+		helper: false,
+
+		// backCompat options
 		axis: false,
-		cancel: "input,textarea,button,select,option",
-		connectToSortable: false,
-		containment: false,
+		// connectToSortable: false,
 		cursor: "auto",
 		cursorAt: false,
-		disabled: false,
 		grid: false,
-		handle: false,
-		helper: "original",
 		opacity: false,
 		refreshPositions: false,
 		revert: false,
@@ -24,14 +27,10 @@ TestHelpers.commonWidgetTests( "draggable", {
 		snapTolerance: 20,
 		stack: false,
 		zIndex: false,
-
-		//todo: remove the following option checks when interactions are rewritten:
-		addClasses: true,
-		delay: 0,
-		distance: 1,
-		iframeFix: false,
+		cancel: null,
 
 		// callbacks
+		beforeStart: null,
 		create: null,
 		drag: null,
 		start: null,
diff --git a/tests/unit/draggable/draggable_core.js b/tests/unit/draggable/draggable_core.js
index 7df0969b1a5..9e977b52d17 100644
--- a/tests/unit/draggable/draggable_core.js
+++ b/tests/unit/draggable/draggable_core.js
@@ -52,26 +52,107 @@ test( "No options, absolute", function() {
 	TestHelpers.draggable.shouldMove( $( "#draggable2" ).draggable(), "no options, absolute" );
 });
 
-test( "resizable handle with complex markup (#8756 / #8757)", function() {
-	expect( 2 );
+//TODO: re-enable when resizable is ported to interactions
+// test( "resizable handle with complex markup (#8756 / #8757)", function() {
+// 	expect( 2 );
+
+// 	$( "#draggable1" )
+// 		.append(
+// 			$("<div>")
+// 				.addClass("ui-resizable-handle ui-resizable-w")
+// 				.append( $("<div>") )
+// 		);
+
+// 	var handle = $(".ui-resizable-w div"),
+// 		target = $( "#draggable1" ).draggable().resizable({ handles: "all" });
+
+// 	// todo: fix resizable so it doesn't require a mouseover
+// 	handle.simulate("mouseover").simulate( "drag", { dx: -50 } );
+// 	equal( target.width(), 250, "compare width" );
+
+// 	// todo: fix resizable so it doesn't require a mouseover
+// 	handle.simulate("mouseover").simulate( "drag", { dx: 50 } );
+// 	equal( target.width(), 200, "compare width" );
+// });
+
+test("_blockFrames, absolute parent", function() {
+	expect( 3 );
+	var el = $("#draggable1").draggable(),
+		parent = $("<div style='width: 600px; height: 600px; position: absolute; top: 300px; left; 400px;'>"),
+		iframe = $("<iframe src='about:blank' width='500' height='500' style='position: absolute; top: 25px; left: 30px;'>"),
+		left, top;
+
+	parent.append( iframe );
+
+	$("#qunit-fixture").prepend( parent );
+
+	el.on( "drag", function() {
+
+		var block = iframe.next();
+
+		left = block.css("left");
+		top = block.css("top");
+
+	});
+
+	TestHelpers.draggable.shouldMove(el);
+
+	equal( left, "30px" );
+	equal( top, "25px" );
+
+});
+
+test("_blockFrames, relative parent", function() {
+	expect( 3 );
+	var el = $("#draggable1").draggable(),
+		parent = $("<div style='width: 600px; height: 600px; position: relative; top: 300px; left; 400px;'>"),
+		iframe = $("<iframe src='about:blank' width='500' height='500' style='position: absolute; top: 25px; left: 30px;'>"),
+		left, top;
 
-	$( "#draggable1" )
-		.append(
-			$("<div>")
-				.addClass("ui-resizable-handle ui-resizable-w")
-				.append( $("<div>") )
-		);
+	parent.append( iframe );
 
-	var handle = $(".ui-resizable-w div"),
-		target = $( "#draggable1" ).draggable().resizable({ handles: "all" });
+	$("#qunit-fixture").prepend( parent );
 
-	// todo: fix resizable so it doesn't require a mouseover
-	handle.simulate("mouseover").simulate( "drag", { dx: -50 } );
-	equal( target.width(), 250, "compare width" );
+	el.on( "drag", function() {
+
+		var block = iframe.next();
+
+		left = block.css("left");
+		top = block.css("top");
+
+	});
+
+	TestHelpers.draggable.shouldMove(el);
+
+	equal( left, "30px" );
+	equal( top, "25px" );
+});
+
+test("_blockFrames, static parent", function() {
+	expect( 3 );
+	var el = $("#draggable1").draggable(),
+		parent = $("<div style='width: 600px; height: 600px; margin-top: 300px; margin-left: 400px;'>"),
+		iframe = $("<iframe src='about:blank' width='500' height='500' style='position: relative; top: 25px; left: 30px;'>"),
+		left, top;
+
+	parent.append( iframe );
+
+	$("#qunit-fixture").prepend( parent );
+
+	el.on( "drag", function() {
+
+		var block = iframe.next();
+
+		left = block.css("left");
+		top = block.css("top");
+
+	});
+
+	TestHelpers.draggable.shouldMove(el);
+
+	equal( left, "430px" );
+  equal( top, "325px" );
 
-	// todo: fix resizable so it doesn't require a mouseover
-	handle.simulate("mouseover").simulate( "drag", { dx: 50 } );
-	equal( target.width(), 200, "compare width" );
 });
 
 test( "#8269: Removing draggable element on drop", function() {
@@ -174,7 +255,6 @@ test( "#5009: scroll not working with parent's position fixed", function() {
 			}
 		});
 
-
 	TestHelpers.forceScrollableWindow();
 
 	$( "#wrapper" ).css( "position", "fixed" );
@@ -221,7 +301,7 @@ test( "#9379: Draggable: position bug in scrollable div", function() {
 	});
 });
 
-test( "#5727: draggable from iframe" , function() {
+test( "#5727: draggable from iframe", function() {
 	expect( 1 );
 
 	var iframeBody, draggable1,
diff --git a/tests/unit/draggable/draggable_options.js b/tests/unit/draggable/draggable_options.js
index 0e728f8dc36..f2951885cd2 100644
--- a/tests/unit/draggable/draggable_options.js
+++ b/tests/unit/draggable/draggable_options.js
@@ -40,7 +40,7 @@ test( "{ appendTo: 'parent' }, default", function() {
 
 	TestHelpers.draggable.trackAppendedParent( element );
 
-	equal( element.draggable( "option", "appendTo" ), "parent" );
+	equal( element.draggable( "option", "appendTo" ), null );
 
 	TestHelpers.draggable.move( element, 1, 1 );
 	equal( element.data( "last_dragged_parent" ), $( "#main" )[ 0 ] );
@@ -85,7 +85,7 @@ test( "{ appendTo: Selector }", function() {
 test( "appendTo, default, switching after initialization", function() {
 	expect( 2 );
 
-	var element = $( "#draggable1" ).draggable({ helper : "clone" });
+	var element = $( "#draggable1" ).draggable({ helper: "clone" });
 
 	TestHelpers.draggable.trackAppendedParent( element );
 
@@ -140,7 +140,7 @@ test( "{ axis: ? }, unexpected", function() {
 test( "axis, default, switching after initialization", function() {
 	expect( 6 );
 
-	var element = $( "#draggable1" ).draggable({ axis : false });
+	var element = $( "#draggable1" ).draggable({ axis: false });
 
 	// Any Direction
 	TestHelpers.draggable.shouldMove( element, "axis: default" );
@@ -227,8 +227,8 @@ test( "{ cancel: Selectors }, matching parent selector", function() {
 });
 */
 
-test( "cancelement, default, switching after initialization", function() {
-	expect( 2 );
+test( "cancel, default, switching after initialization", function() {
+	expect( 3 );
 
 	$( "<div id='draggable-option-cancel-default'><input type='text'></div>" ).appendTo( "#qunit-fixture" );
 
@@ -504,12 +504,12 @@ test( "cursorAt", function() {
 	var deltaX = -3,
 		deltaY = -3,
 		tests = {
-			"false": { cursorAt : false },
-			"{ left: -5, top: -5 }": { x: -5, y: -5, cursorAt : { left: -5, top: -5 } },
-			"[ 10, 20 ]": { x: 10, y: 20, cursorAt : [ 10, 20 ] },
-			"'10 20'": { x: 10, y: 20, cursorAt : "10 20" },
-			"{ left: 20, top: 40 }": { x: 20, y: 40, cursorAt : { left: 20, top: 40 } },
-			"{ right: 10, bottom: 20 }": { x: 10, y: 20, cursorAt : { right: 10, bottom: 20 } }
+			"false": { cursorAt: false },
+			"{ left: -5, top: -5 }": { x: -5, y: -5, cursorAt: { left: -5, top: -5 } },
+			"[ 10, 20 ]": { x: 10, y: 20, cursorAt: [ 10, 20 ] },
+			"'10 20'": { x: 10, y: 20, cursorAt: "10 20" },
+			"{ left: 20, top: 40 }": { x: 20, y: 40, cursorAt: { left: 20, top: 40 } },
+			"{ right: 10, bottom: 20 }": { x: 10, y: 20, cursorAt: { right: 10, bottom: 20 } }
 		};
 
 	$.each( tests, function( testName, testData ) {
@@ -517,10 +517,10 @@ test( "cursorAt", function() {
 			var element = $( "#draggable" + ( i + 1 ) ).draggable({
 					cursorAt: testData.cursorAt,
 					drag: function( event, ui ) {
-						if( !testData.cursorAt ) {
+						if ( !testData.cursorAt ) {
 							equal( ui.position.left - ui.originalPosition.left, deltaX, testName + " " + position + " left" );
 							equal( ui.position.top - ui.originalPosition.top, deltaY, testName + " " + position + " top" );
-						} else if( testData.cursorAt.right ) {
+						} else if ( testData.cursorAt.right ) {
 							equal( ui.helper.width() - ( event.clientX - ui.offset.left ), testData.x - TestHelpers.draggable.unreliableOffset, testName + " " + position + " left" );
 							equal( ui.helper.height() - ( event.clientY - ui.offset.top ), testData.y - TestHelpers.draggable.unreliableOffset, testName + " " +position + " top" );
 						} else {
@@ -545,12 +545,12 @@ test( "cursorAt, switching after initialization", function() {
 	var deltaX = -3,
 		deltaY = -3,
 		tests = {
-			"false": { cursorAt : false },
-			"{ left: -5, top: -5 }": { x: -5, y: -5, cursorAt : { left: -5, top: -5 } },
-			"[ 10, 20 ]": { x: 10, y: 20, cursorAt : [ 10, 20 ] },
-			"'10 20'": { x: 10, y: 20, cursorAt : "10 20" },
-			"{ left: 20, top: 40 }": { x: 20, y: 40, cursorAt : { left: 20, top: 40 } },
-			"{ right: 10, bottom: 20 }": { x: 10, y: 20, cursorAt : { right: 10, bottom: 20 } }
+			"false": { cursorAt: false },
+			"{ left: -5, top: -5 }": { x: -5, y: -5, cursorAt: { left: -5, top: -5 } },
+			"[ 10, 20 ]": { x: 10, y: 20, cursorAt: [ 10, 20 ] },
+			"'10 20'": { x: 10, y: 20, cursorAt: "10 20" },
+			"{ left: 20, top: 40 }": { x: 20, y: 40, cursorAt: { left: 20, top: 40 } },
+			"{ right: 10, bottom: 20 }": { x: 10, y: 20, cursorAt: { right: 10, bottom: 20 } }
 		};
 
 	$.each( tests, function( testName, testData ) {
@@ -559,10 +559,10 @@ test( "cursorAt, switching after initialization", function() {
 
 			element.draggable({
 					drag: function( event, ui ) {
-						if( !testData.cursorAt ) {
+						if ( !testData.cursorAt ) {
 							equal( ui.position.left - ui.originalPosition.left, deltaX, testName + " " + position + " left" );
 							equal( ui.position.top - ui.originalPosition.top, deltaY, testName + " " + position + " top" );
-						} else if( testData.cursorAt.right ) {
+						} else if ( testData.cursorAt.right ) {
 							equal( ui.helper.width() - ( event.clientX - ui.offset.left ), testData.x - TestHelpers.draggable.unreliableOffset, testName + " " + position + " left" );
 							equal( ui.helper.height() - ( event.clientY - ui.offset.top ), testData.y - TestHelpers.draggable.unreliableOffset, testName + " " +position + " top" );
 						} else {
@@ -672,7 +672,7 @@ test( "helper, default, switching after initialization", function() {
 });
 
 /* jshint loopfunc: true */
-(function(){
+(function() {
 	var k, l, m,
 		scrollElements = {
 			"no elements": [],
@@ -689,7 +689,7 @@ test( "helper, default, switching after initialization", function() {
 	for ( m = 0 ; m < helpers.length; m++ ) {
 		for ( l = 0; l < positions.length; l++ ) {
 			for ( k in scrollElements ) {
-				(function( position, helper, scrollElements, scrollElementsTitle ){
+				(function( position, helper, scrollElements, scrollElementsTitle ) {
 					test( "{ helper: '" + helper + "' }, " + position + ", with scroll offset on " + scrollElementsTitle, function() {
 						expect( scrollPositions.length * 2 );
 
diff --git a/tests/unit/draggable/draggable_test_helpers.js b/tests/unit/draggable/draggable_test_helpers.js
index 0b533a4e1ba..dbaba4cfe05 100644
--- a/tests/unit/draggable/draggable_test_helpers.js
+++ b/tests/unit/draggable/draggable_test_helpers.js
@@ -2,7 +2,7 @@ TestHelpers.draggable = {
 	// TODO: remove the unreliable offset hacks
 	unreliableOffset: $.ui.ie && ( !document.documentMode || document.documentMode < 8 ) ? 2 : 0,
 	// Support: Opera 12.10, Safari 5.1, jQuery <1.8
-	unreliableContains: (function(){
+	unreliableContains: (function() {
 		var element = $( "<div>" );
 		return $.contains( element[ 0 ].ownerDocument, element[ 0 ] );
 	})(),
@@ -62,7 +62,7 @@ TestHelpers.draggable = {
 		});
 		$( el ).unbind( "dragstop" );
 	},
-	setScrollable: function ( what, isScrollable ) {
+	setScrollable: function( what, isScrollable ) {
 		var overflow = isScrollable ? "scroll" : "hidden";
 		$( what ).css({ overflow: overflow, overflowX: overflow, overflowY: overflow });
 	},
@@ -76,6 +76,12 @@ TestHelpers.draggable = {
 		$( what ).scrollTop( 0 ).scrollLeft( 0 );
 	},
 	setScroll: function( what ) {
+		if (what) {
+			$(document).scrollTop(100); $(document).scrollLeft(100);
+		} else {
+			$("#main").scrollTop(100); $("#main").scrollLeft(100);
+		}
+
 		$( what ).scrollTop( 100 ).scrollLeft( 100 );
 	},
 	border: function( el, side ) {
@@ -90,12 +96,12 @@ TestHelpers.draggable = {
 			dy: y
 		});
 	},
-	trackMouseCss : function( el ) {
+	trackMouseCss: function( el ) {
 		el.bind( "drag", function() {
 			el.data( "last_dragged_cursor", $( "body" ).css( "cursor" ) );
 		});
 	},
-	trackAppendedParent : function( el ) {
+	trackAppendedParent: function( el ) {
 		// TODO: appendTo is currently ignored if helper is original (see #7044)
 		el.draggable( "option", "helper", "clone" );
 
@@ -104,4 +110,4 @@ TestHelpers.draggable = {
 			el.data( "last_dragged_parent", ui.helper.parent()[ 0 ] );
 		});
 	}
-};
\ No newline at end of file
+};
diff --git a/tests/unit/droppable/droppable.html b/tests/unit/droppable/droppable.html
index 9a3a4bd0796..908ca208840 100644
--- a/tests/unit/droppable/droppable.html
+++ b/tests/unit/droppable/droppable.html
@@ -15,7 +15,7 @@
 		js: [
 			"ui/core.js",
 			"ui/widget.js",
-			"ui/mouse.js",
+			"ui/interaction.js",
 			"ui/draggable.js",
 			"ui/droppable.js"
 		]
@@ -39,9 +39,8 @@ <h2 id="qunit-banner"></h2>
 <h2 id="qunit-userAgent"></h2>
 <ol id="qunit-tests"></ol>
 <div id="qunit-fixture">
-
-<div id="draggable1" style="width: 25px; height: 25px;">Draggable</div>
 <div id="droppable1" style="width: 100px; height: 100px;">Droppable</div>
+<div id="draggable1" style="width: 25px; height: 25px; position: absolute; top: 150px;">Draggable</div>
 <div id="droppable2" style="width: 100px; height: 100px;">Droppable</div>
 <div style='width:1000px;height:1000px;'>&nbsp;</div>
 
diff --git a/tests/unit/droppable/droppable_common.js b/tests/unit/droppable/droppable_common.js
index c112def3cf4..dd0c82061c8 100644
--- a/tests/unit/droppable/droppable_common.js
+++ b/tests/unit/droppable/droppable_common.js
@@ -2,7 +2,6 @@ TestHelpers.commonWidgetTests( "droppable", {
 	defaults: {
 		accept: "*",
 		activeClass: false,
-		addClasses: true,
 		disabled: false,
 		greedy: false,
 		hoverClass: false,
diff --git a/tests/unit/droppable/droppable_options.js b/tests/unit/droppable/droppable_options.js
index 1d8f95da90b..295d96d53ff 100644
--- a/tests/unit/droppable/droppable_options.js
+++ b/tests/unit/droppable/droppable_options.js
@@ -5,35 +5,82 @@
 
 module("droppable: options");
 
-/*
 test("{ accept '*' }, default ", function() {
-	ok(false, 'missing test - untested code is broken code');
+
+	expect( 1 );
+
+	var droppable = $("#droppable1").droppable(),
+		draggable = $("#draggable1").draggable();
+
+	TestHelpers.droppable.shouldDrop( draggable, droppable, "Default" );
+
 });
 
 test("{ accept: Selector }", function() {
-	ok(false, 'missing test - untested code is broken code');
+	expect( 3 );
+
+	var target = $("#droppable1").droppable(),
+		source = $("#draggable1").draggable();
+
+	TestHelpers.droppable.shouldDrop( source, target, "Default" );
+
+	target.droppable( "option", "accept", "#foo" );
+	TestHelpers.droppable.shouldNotDrop( source, target, "Not correct selector" );
+
+	target.droppable( "option", "accept", "#draggable1" );
+	TestHelpers.droppable.shouldDrop( source, target, "Correct selector" );
+
 });
 
-test("{ accept: function(draggable) }", function() {
-	ok(false, 'missing test - untested code is broken code');
+test("{ accept: Function }", function() {
+
+	expect( 5 );
+
+	var target = $("#droppable1").droppable(),
+		source = $("#draggable1").draggable(),
+		counter = 0;
+
+	function accept() {
+		++counter;
+		return ( counter%2 === 0 );
+	}
+
+	target.droppable( "option", "accept", accept );
+
+	TestHelpers.droppable.shouldNotDrop( source, target, "Function returns false" );
+	TestHelpers.droppable.shouldDrop( source, target, "Function returns true" );
+	TestHelpers.droppable.shouldNotDrop( source, target, "Function returns false" );
+	TestHelpers.droppable.shouldDrop( source, target, "Function returns true" );
+
+	target.droppable( "option", "accept", "*" );
+	TestHelpers.droppable.shouldDrop( source, target, "Reset back to *" );
+
 });
 
 test("activeClass", function() {
-	ok(false, 'missing test - untested code is broken code');
-});
-*/
-test("{ addClasses: true }, default", function() {
-	expect( 1 );
-	var el = $("<div></div>").droppable({ addClasses: true });
-	ok(el.is(".ui-droppable"), "'ui-droppable' class added");
-	el.droppable("destroy");
-});
 
-test("{ addClasses: false }", function() {
-	expect( 1 );
-	var el = $("<div></div>").droppable({ addClasses: false });
-	ok(!el.is(".ui-droppable"), "'ui-droppable' class not added");
-	el.droppable("destroy");
+	expect( 6 );
+
+	var target = $("#droppable1").droppable(),
+		source = $("#draggable1").draggable(),
+		myclass = "myclass",
+		hasclass = false;
+
+	source.on( "drag", function() {
+		hasclass = target.hasClass( myclass );
+	});
+
+	TestHelpers.droppable.shouldDrop( source, target );
+	equal( hasclass, false, "Option not set yet" );
+
+	target.droppable( "option", "activeClass", myclass );
+	TestHelpers.droppable.shouldDrop( source, target );
+	equal( hasclass, true, "Option set" );
+
+	target.droppable( "option", "activeClass", false );
+	TestHelpers.droppable.shouldDrop( source, target );
+	equal( hasclass, false, "Option unset" );
+
 });
 
 test( "scope", function() {
@@ -78,6 +125,7 @@ test( "scope", function() {
 	equal( draggableOffset.top, oldDraggableOffset.top );
 });
 /*
+
 test("greedy", function() {
 	ok(false, 'missing test - untested code is broken code');
 });
diff --git a/tests/unit/droppable/droppable_test_helpers.js b/tests/unit/droppable/droppable_test_helpers.js
index ffd37452999..882b41ffe3c 100644
--- a/tests/unit/droppable/droppable_test_helpers.js
+++ b/tests/unit/droppable/droppable_test_helpers.js
@@ -1,10 +1,42 @@
 TestHelpers.droppable = {
-	shouldDrop: function() {
-		// todo: actually implement this
-		ok(true, "missing test - untested code is broken code");
+	shouldDrop: function( source, target, why ) {
+	
+		var dropped = this.detectDropped( source, target );
+		
+		why = why ? "Dropped: " + why : "";
+		
+		equal( dropped, true,  + why );
+		
 	},
-	shouldNotDrop: function() {
-		// todo: actually implement this
-		ok(true, "missing test - untested code is broken code");
+	shouldNotDrop: function( source, target, why ) {
+	
+		var dropped = this.detectDropped( source, target );
+		
+		why = why ? "Not Dropped: " + why : "";
+		
+		equal( dropped, false, why );
+	},
+	detectDropped: function( source, target ) {
+	
+		// TODO: Remove these lines after old tests upgraded
+		if ( !source || !target ){
+			ok(true, "missing test - untested code is broken code");
+		}
+		
+		var targetOffset = target.offset(),
+			sourceOffset = source.offset(),
+			dropped = false;
+		
+		$(target).on( "drop", function() {
+			dropped = true;
+		});
+		
+		$(source).simulate( "drag", {
+			dx: targetOffset.left - sourceOffset.left,
+			dy: targetOffset.top - sourceOffset.top
+		});
+		
+		return dropped;
+	
 	}
 };
\ No newline at end of file
diff --git a/tests/unit/sortable/sortable.html b/tests/unit/sortable/sortable.html
index ac1c037dd16..481bd2c29e3 100644
--- a/tests/unit/sortable/sortable.html
+++ b/tests/unit/sortable/sortable.html
@@ -15,7 +15,7 @@
 		js: [
 			"ui/core.js",
 			"ui/widget.js",
-			"ui/mouse.js",
+			"ui/interaction.js",
 			"ui/sortable.js"
 		]
 	});
diff --git a/tests/unit/sortable/sortable_common.js b/tests/unit/sortable/sortable_common.js
index 86850a658c3..7ba91d528c7 100644
--- a/tests/unit/sortable/sortable_common.js
+++ b/tests/unit/sortable/sortable_common.js
@@ -25,7 +25,6 @@ TestHelpers.commonWidgetTests( "sortable", {
 		scrollSpeed: 20,
 		scope: "default",
 		tolerance: "intersect",
-		zIndex: 1000,
 
 		// callbacks
 		activate: null,
diff --git a/tests/unit/sortable/sortable_events.js b/tests/unit/sortable/sortable_events.js
index 8333b8bd470..5898d63767d 100644
--- a/tests/unit/sortable/sortable_events.js
+++ b/tests/unit/sortable/sortable_events.js
@@ -18,8 +18,7 @@ test("start", function() {
 	});
 
 	ok(hash, "start event triggered");
-	ok(hash.helper, "UI hash includes: helper");
-	ok(hash.placeholder, "UI hash includes: placeholder");
+	ok(!hash.helper, "UI hash includes: helper");
 	ok(hash.item, "UI hash includes: item");
 	ok(!hash.sender, "UI hash does not include: sender");
 
@@ -27,7 +26,6 @@ test("start", function() {
 	ok("position" in hash, "UI hash includes: position");
 	ok("offset" in hash, "UI hash includes: offset");
 
-
 });
 
 test("sort", function() {
@@ -43,8 +41,7 @@ test("sort", function() {
 	});
 
 	ok(hash, "sort event triggered");
-	ok(hash.helper, "UI hash includes: helper");
-	ok(hash.placeholder, "UI hash includes: placeholder");
+	ok(!hash.helper, "UI hash does not includes: helper");
 	ok(hash.position && ("top" in hash.position && "left" in hash.position), "UI hash includes: position");
 	ok(hash.offset && (hash.offset.top && hash.offset.left), "UI hash includes: offset");
 	ok(hash.item, "UI hash includes: item");
@@ -177,28 +174,28 @@ test("#3019: Stop fires too early", function() {
 
 });
 
-test("#4752: link event firing on sortable with connect list", function () {
+test("#4752: link event firing on sortable with connect list", function() {
 	expect( 10 );
 
 	var fired = {},
-		hasFired = function (type) { return (type in fired) && (true === fired[type]); };
+		hasFired = function(type) { return (type in fired) && (true === fired[type]); };
 
 	$("#sortable").clone().attr("id", "sortable2").insertAfter("#sortable");
 
 	$("#qunit-fixture ul").sortable({
 		connectWith: "#qunit-fixture ul",
-		change: function () {
+		change: function() {
 			fired.change = true;
 		},
-		receive: function () {
+		receive: function() {
 			fired.receive = true;
 		},
-		remove: function () {
+		remove: function() {
 			fired.remove = true;
 		}
 	});
 
-	$("#qunit-fixture ul").bind("click.ui-sortable-test", function () {
+	$("#qunit-fixture ul").bind("click.ui-sortable-test", function() {
 		fired.click = true;
 	});
 
diff --git a/ui/draggable.js b/ui/draggable.js
index 13f898c8cba..1e7990e27c9 100644
--- a/ui/draggable.js
+++ b/ui/draggable.js
@@ -15,8 +15,8 @@
 		define([
 			"jquery",
 			"./core",
-			"./mouse",
-			"./widget"
+			"./widget",
+			"./interaction"
 		], factory );
 	} else {
 
@@ -25,994 +25,1210 @@
 	}
 }(function( $ ) {
 
-$.widget("ui.draggable", $.ui.mouse, {
+// Create a shallow copy of an object
+function copy( obj ) {
+	var prop,
+		ret = {};
+	for ( prop in obj ) {
+		ret[ prop ] = obj[ prop ];
+	}
+	return ret;
+}
+
+$.widget( "ui.draggable", $.ui.interaction, {
 	version: "@VERSION",
 	widgetEventPrefix: "drag",
+
 	options: {
-		addClasses: true,
-		appendTo: "parent",
-		axis: false,
-		connectToSortable: false,
-		containment: false,
-		cursor: "auto",
-		cursorAt: false,
-		grid: false,
-		handle: false,
-		helper: "original",
-		iframeFix: false,
-		opacity: false,
-		refreshPositions: false,
-		revert: false,
-		revertDuration: 500,
-		scope: "default",
-		scroll: true,
-		scrollSensitivity: 20,
-		scrollSpeed: 20,
-		snap: false,
-		snapMode: "both",
-		snapTolerance: 20,
-		stack: false,
-		zIndex: false,
+		appendTo: null,
+		exclude: "input,textarea,button,select",
+		handle: null,
+		helper: false,
 
 		// callbacks
+		beforeStart: null,
 		drag: null,
 		start: null,
 		stop: null
 	},
-	_create: function() {
 
-		if (this.options.helper === "original" && !(/^(?:r|a|f)/).test(this.element.css("position"))) {
-			this.element[0].style.position = "relative";
-		}
-		if (this.options.addClasses){
-			this.element.addClass("ui-draggable");
-		}
-		if (this.options.disabled){
-			this.element.addClass("ui-draggable-disabled");
-		}
-		this._setHandleClassName();
+	// dragEl: element being dragged (original or helper)
+	// position: final CSS position of dragEl
+	// offset: offset of dragEl
+	// originalPosition: CSS position before drag start
+	// originalOffset: offset before drag start
+	// originalPointer: pageX/Y at drag start (offset of pointer)
+	// startPosition: CSS position at drag start (after beforeStart)
+	// startOffset: offset at drag start (after beforeStart)
+	// tempPosition: overridable CSS position of dragEl
+	// overflowOffset: offset of scroll parent
+	// overflow: object containing width and height keys of scroll parent
+	// domPosition: object containing original parent and index when using
+	// appendTo option without a helper
+	// dragDimensions: saved off width and height used for various options
+
+	scrollSensitivity: 20,
+	scrollSpeed: 5,
 
-		this._mouseInit();
-	},
+	_create: function() {
+		this._super();
 
-	_setOption: function( key, value ) {
-		this._super( key, value );
-		if ( key === "handle" ) {
-			this._setHandleClassName();
+		// Static position elements can't be moved with top/left
+		if ( this.element.css( "position" ) === "static" ) {
+			this.element.css( "position", "relative" );
 		}
-	},
 
-	_destroy: function() {
-		if ( ( this.helper || this.element ).is( ".ui-draggable-dragging" ) ) {
-			this.destroyOnClear = true;
-			return;
-		}
-		this.element.removeClass( "ui-draggable ui-draggable-dragging ui-draggable-disabled" );
-		this._removeHandleClassName();
-		this._mouseDestroy();
+		this.element.addClass( "ui-draggable" );
 	},
 
-	_mouseCapture: function(event) {
-
-		var document = this.document[ 0 ],
-			o = this.options;
-
-		// support: IE9
-		// IE9 throws an "Unspecified error" accessing document.activeElement from an <iframe>
-		try {
-			// Support: IE9+
-			// If the <body> is blurred, IE will switch windows, see #9520
-			if ( document.activeElement && document.activeElement.nodeName.toLowerCase() !== "body" ) {
-				// Blur any element that currently has focus, see #4261
-				$( document.activeElement ).blur();
-			}
-		} catch ( error ) {}
-
-		// among others, prevent a drag on a resizable-handle
-		if (this.helper || o.disabled || $(event.target).closest(".ui-resizable-handle").length > 0) {
-			return false;
-		}
-
-		//Quit if we're not on a valid handle
-		this.handle = this._getHandle(event);
-		if (!this.handle) {
-			return false;
-		}
-
-		$(o.iframeFix === true ? "iframe" : o.iframeFix).each(function() {
-			$("<div class='ui-draggable-iframeFix' style='background: #fff;'></div>")
-			.css({
-				width: this.offsetWidth+"px", height: this.offsetHeight+"px",
-				position: "absolute", opacity: "0.001", zIndex: 1000
-			})
-			.css($(this).offset())
-			.appendTo("body");
-		});
+	/** interaction interface **/
 
-		return true;
+	_isValidTarget: function( element ) {
+		var handle = this.options.handle ?
+				element.is( this.element.find( this.options.handle ) ) :
+				true,
+			exclude = this.options.exclude ?
+				element.is( this.element.find( this.options.exclude ) ) :
+				false;
 
+		return handle && !exclude;
 	},
 
-	_mouseStart: function(event) {
+	_start: function( event, pointerPosition ) {
+		var offset, startCssLeft, startCssTop, startPosition, startOffset;
 
-		var o = this.options;
+		// Reset
+		this.dragDimensions = null;
 
-		//Create and append the visible helper
-		this.helper = this._createHelper(event);
+		// The actual dragging element, should always be a jQuery object
+		this.dragEl = this.options.helper ?
+			this._createHelper( pointerPosition ) :
+			this.element;
 
-		this.helper.addClass("ui-draggable-dragging");
-
-		//Cache the helper size
-		this._cacheHelperProportions();
-
-		//If ddmanager is used for droppables, set the global draggable
-		if($.ui.ddmanager) {
-			$.ui.ddmanager.current = this;
+		// _createHelper() ensures that helpers are in the correct position
+		// in the DOM, but we need to handle appendTo when there is no helper
+		if ( this.options.appendTo && this.dragEl === this.element ) {
+			this.domPosition = {
+				parent: this.element.parent(),
+				index: this.element.index()
+			};
+			offset = this.dragEl.offset();
+			this.dragEl
+				.appendTo( this._appendTo() )
+				.offset( offset );
 		}
 
-		/*
-		 * - Position generation -
-		 * This block generates everything position related - it's the core of draggables.
-		 */
+		this.cssPosition = this.dragEl.css( "position" );
+		this.scrollParent = this.element.scrollParent();
 
-		//Cache the margins of the original element
-		this._cacheMargins();
+		// Cache starting positions
+		this.originalPosition = this.startPosition = this._getPosition();
+		this.originalOffset = this.startOffset = this.dragEl.offset();
+		this.originalPointer = pointerPosition;
 
-		//Store the helper's css position
-		this.cssPosition = this.helper.css( "position" );
-		this.scrollParent = this.helper.scrollParent();
-		this.offsetParent = this.helper.offsetParent();
-		this.offsetParentCssPosition = this.offsetParent.css( "position" );
-
-		//The element's absolute position on the page minus margins
-		this.offset = this.positionAbs = this.element.offset();
-		this.offset = {
-			top: this.offset.top - this.margins.top,
-			left: this.offset.left - this.margins.left
-		};
+		// If not already cached within _createHelper()
+		if ( !this.dragDimensions ) {
+			this._cacheDragDimensions( this.dragEl );
+		}
 
-		//Reset scroll cache
-		this.offset.scroll = false;
+		// Cache current position and offset
+		this.position = copy( this.startPosition );
+		this.offset = copy( this.startOffset );
 
-		$.extend(this.offset, {
-			click: { //Where the click happened, relative to the element
-				left: event.pageX - this.offset.left,
-				top: event.pageY - this.offset.top
-			},
-			parent: this._getParentOffset(),
-			relative: this._getRelativeOffset() //This is a relative to absolute position minus the actual position calculation - only used for relative positioned helper
-		});
+		// Cache the offset of scrollParent, if required for _handleScrolling()
+		if ( this.scrollParent[ 0 ] !== this.document[ 0 ] &&
+				this.scrollParent[ 0 ].tagName.toUpperCase() !== "HTML" ) {
+			this.overflowOffset = this.scrollParent.offset();
+		}
 
-		//Generate the original position
-		this.originalPosition = this.position = this._generatePosition( event, false );
-		this.originalPageX = event.pageX;
-		this.originalPageY = event.pageY;
+		this.overflow = {
+			height: this.scrollParent[ 0 ] === this.document[ 0 ] ?
+				this.window.height() : this.scrollParent.height(),
+			width: this.scrollParent[ 0 ] === this.document[ 0 ] ?
+				this.window.width() : this.scrollParent.width()
+		};
 
-		//Adjust the mouse offset relative to the helper if "cursorAt" is supplied
-		(o.cursorAt && this._adjustOffsetFromHelper(o.cursorAt));
+		this._preparePosition( pointerPosition );
 
-		//Set a containment if given in the options
-		this._setContainment();
+		// If user cancels beforeStart, don't allow dragging
+		if ( this._trigger( "beforeStart", event,
+				this._originalHash( pointerPosition ) ) === false ) {
 
-		//Trigger event + callbacks
-		if(this._trigger("start", event) === false) {
-			this._clear();
+			// domPosition needs to be undone even if beforeStart is stopped,
+			// otherwise this.dragEl will remain in the `appendTo` element
+			this._resetDomPosition();
 			return false;
 		}
 
-		//Recache the helper size
-		this._cacheHelperProportions();
+		// Save off the usual properties locally, so they can be reverted
+		startCssLeft = this.dragEl.css( "left" );
+		startCssTop = this.dragEl.css( "top" );
+		startPosition = copy( this._getPosition() );
+		startOffset = copy( this.offset );
+
+		this._setCss();
+		this.startPosition = this._getPosition();
+		this.startOffset = this.dragEl.offset();
+
+		// If user cancels on start, don't allow dragging
+		if ( this._trigger( "start", event,
+				this._fullHash( pointerPosition ) ) === false ) {
+
+			// domPosition needs to be undone even if start is stopped,
+			// otherwise this.dragEl will remain in the `appendTo` element
+			this.startPosition = startPosition;
+			this.startOffset = startOffset;
+			this.dragEl.css({
+				left: startCssLeft,
+				top: startCssTop
+			});
 
-		//Prepare the droppable offsets
-		if ($.ui.ddmanager && !o.dropBehaviour) {
-			$.ui.ddmanager.prepareOffsets(this, event);
+			this._resetDomPosition();
+			return false;
 		}
 
+		this._blockFrames();
+	},
 
-		this._mouseDrag(event, true); //Execute the drag once - this causes the helper not to be visible before getting its correct position
+	_move: function( event, pointerPosition ) {
+		this._preparePosition( pointerPosition );
 
-		//If the ddmanager is used for droppables, inform the manager that dragging has started (see #5003)
-		if ( $.ui.ddmanager ) {
-			$.ui.ddmanager.dragStart(this, event);
+		// If user cancels drag, don't move the element
+		if ( this._trigger( "drag", event,
+				this._fullHash( pointerPosition ) ) === false ) {
+			return;
 		}
 
-		return true;
-	},
+		this._setCss();
 
-	_mouseDrag: function(event, noPropagation) {
-		// reset any necessary cached properties (see #5009)
-		if ( this.offsetParentCssPosition === "fixed" ) {
-			this.offset.parent = this._getParentOffset();
-		}
+		// Scroll the scrollParent, if needed
+		this._handleScrolling( pointerPosition );
+	},
 
-		//Compute the helpers position
-		this.position = this._generatePosition( event, true );
-		this.positionAbs = this._convertPositionTo("absolute");
+	_stop: function( event, pointerPosition ) {
+		this._preparePosition( pointerPosition );
 
-		//Call plugins and callbacks and use the resulting position if something is returned
-		if (!noPropagation) {
-			var ui = this._uiHash();
-			if(this._trigger("drag", event, ui) === false) {
-				this._mouseUp({});
-				return false;
+		// If user cancels stop, leave helper there
+		if ( this._trigger( "stop", event,
+				this._fullHash( pointerPosition ) ) !== false ) {
+			if ( this.options.helper ) {
+				delete this.helper;
+				this.dragEl.remove();
 			}
-			this.position = ui.position;
-		}
-
-		this.helper[ 0 ].style.left = this.position.left + "px";
-		this.helper[ 0 ].style.top = this.position.top + "px";
-
-		if($.ui.ddmanager) {
-			$.ui.ddmanager.drag(this, event);
+			this._resetDomPosition();
 		}
 
-		return false;
+		this._unblockFrames();
 	},
 
-	_mouseStop: function(event) {
+	/** internal **/
 
-		//If we are using droppables, inform the manager about the drop
-		var that = this,
-			dropped = false;
-		if ($.ui.ddmanager && !this.options.dropBehaviour) {
-			dropped = $.ui.ddmanager.drop(this, event);
+	_createHelper: function( pointerPosition ) {
+		var offset = this.element.offset(),
+			xPos = (pointerPosition.x - offset.left) / this.element.outerWidth(),
+			yPos = (pointerPosition.y - offset.top) / this.element.outerHeight();
+
+		// Clone
+		if ( this.options.helper === true ) {
+			this.helper = this.element.clone()
+				.removeAttr( "id" )
+				.find( "[id]" )
+					.removeAttr( "id" )
+				.end();
+		} else {
+			// TODO: figure out the signature for this; see #4957
+			this.helper = $( this.options.helper() );
 		}
 
-		//if a drop comes from outside (a sortable)
-		if(this.dropped) {
-			dropped = this.dropped;
-			this.dropped = false;
+		// Ensure the helper is in the DOM; obey the appendTo option if it exists
+		if ( this.options.appendTo || !this.helper.closest( "body" ).length ) {
+			this.helper.appendTo( this._appendTo() || this.document[ 0 ].body );
 		}
 
-		if((this.options.revert === "invalid" && !dropped) || (this.options.revert === "valid" && dropped) || this.options.revert === true || ($.isFunction(this.options.revert) && this.options.revert.call(this.element, dropped))) {
-			$(this.helper).animate(this.originalPosition, parseInt(this.options.revertDuration, 10), function() {
-				if(that._trigger("stop", event) !== false) {
-					that._clear();
-				}
+		this._cacheDragDimensions( this.helper );
+
+		return this.helper
+			// Helper must be absolute to function properly
+			.css( "position", "absolute" )
+			.offset({
+				left: pointerPosition.x - this.dragDimensions.width * xPos,
+				top: pointerPosition.y - this.dragDimensions.height * yPos
 			});
-		} else {
-			if(this._trigger("stop", event) !== false) {
-				this._clear();
-			}
-		}
+	},
 
-		return false;
+	_cacheDragDimensions: function( element ) {
+		this.dragDimensions = {
+			width: element.outerWidth(),
+			height: element.outerHeight()
+		};
 	},
 
-	_mouseUp: function(event) {
-		//Remove frame helpers
-		$("div.ui-draggable-iframeFix").each(function() {
-			this.parentNode.removeChild(this);
-		});
+	_resetDomPosition: function() {
 
-		//If the ddmanager is used for droppables, inform the manager that dragging has stopped (see #5003)
-		if( $.ui.ddmanager ) {
-			$.ui.ddmanager.dragStop(this, event);
+		// Nothing to do in this case
+		if ( !this.domPosition ) {
+			return;
 		}
 
-		// The interaction is over; whether or not the click resulted in a drag, focus the element
-		this.element.focus();
-
-		return $.ui.mouse.prototype._mouseUp.call(this, event);
-	},
-
-	cancel: function() {
-
-		if(this.helper.is(".ui-draggable-dragging")) {
-			this._mouseUp({});
+		var parent = this.domPosition.parent,
+			next = parent.children().eq( this.domPosition.index );
+		if ( next.length ) {
+			next.before( this.element );
 		} else {
-			this._clear();
+			parent.append( this.element );
 		}
-
-		return this;
-
+		this.element.offset( this.offset );
+		this.domPosition = null;
 	},
 
-	_getHandle: function(event) {
-		return this.options.handle ?
-			!!$( event.target ).closest( this.element.find( this.options.handle ) ).length :
-			true;
+	// TODO: Remove after 2.0, only used for backCompat
+	_appendTo: function() {
+		return this.options.appendTo;
 	},
 
-	_setHandleClassName: function() {
-		this._removeHandleClassName();
-		$( this.options.handle || this.element ).addClass( "ui-draggable-handle" );
-	},
+	_getPosition: function() {
+		var left, top, position,
+			scrollTop = this.scrollParent.scrollTop(),
+			scrollLeft = this.scrollParent.scrollLeft();
 
-	_removeHandleClassName: function() {
-		this.element.find( ".ui-draggable-handle" )
-			.addBack()
-			.removeClass( "ui-draggable-handle" );
-	},
-
-	_createHelper: function(event) {
+		// If fixed or absolute
+		if ( this.cssPosition !== "relative" ) {
+			position = this.dragEl.position();
 
-		var o = this.options,
-			helper = $.isFunction(o.helper) ? $(o.helper.apply(this.element[0], [event])) : (o.helper === "clone" ? this.element.clone().removeAttr("id") : this.element);
+			// Take into account scrollbar
+			position.top -= scrollTop;
+			position.left -= scrollLeft;
 
-		if(!helper.parents("body").length) {
-			helper.appendTo((o.appendTo === "parent" ? this.element[0].parentNode : o.appendTo));
+			return position;
 		}
 
-		if(helper[0] !== this.element[0] && !(/(fixed|absolute)/).test(helper.css("position"))) {
-			helper.css("position", "absolute");
-		}
+		// When using relative, css values are checked,
+		// otherwise the position wouldn't account for padding on ancestors
+		left = this.dragEl.css( "left" );
+		top = this.dragEl.css( "top" );
 
-		return helper;
+		// TODO: add proper support comment
+		// Webkit will give back auto if there is no explicit value
+		left = ( left === "auto" ) ? 0: parseInt( left, 10 );
+		top = ( top === "auto" ) ? 0: parseInt( top, 10 );
 
+		return {
+			left: left - scrollLeft,
+			top: top - scrollTop
+		};
 	},
 
-	_adjustOffsetFromHelper: function(obj) {
-		if (typeof obj === "string") {
-			obj = obj.split(" ");
-		}
-		if ($.isArray(obj)) {
-			obj = {left: +obj[0], top: +obj[1] || 0};
-		}
-		if ("left" in obj) {
-			this.offset.click.left = obj.left + this.margins.left;
-		}
-		if ("right" in obj) {
-			this.offset.click.left = this.helperProportions.width - obj.right + this.margins.left;
-		}
-		if ("top" in obj) {
-			this.offset.click.top = obj.top + this.margins.top;
+	_handleScrolling: function( pointerPosition ) {
+		var newScrollTop, newScrollLeft, change,
+			scrollTop = this.scrollParent.scrollTop(),
+			scrollLeft = this.scrollParent.scrollLeft(),
+			scrollSensitivity = this.scrollSensitivity,
+
+			// overflowOffset is only set when scrollParent is not doc/html
+			overflowLeft = this.overflowOffset ?
+				this.overflowOffset.left :
+				scrollLeft,
+			overflowTop = this.overflowOffset ?
+				this.overflowOffset.top :
+				scrollTop,
+			xRight = this.overflow.width + overflowLeft - pointerPosition.x,
+			xLeft = pointerPosition.x - overflowLeft,
+			yBottom = this.overflow.height + overflowTop - pointerPosition.y,
+			yTop = pointerPosition.y - overflowTop;
+
+		// Handle vertical scrolling
+		if ( yBottom < scrollSensitivity ) {
+			change = this._speed( scrollSensitivity - yBottom );
+			this.scrollParent.scrollTop( scrollTop + change );
+			this.originalPointer.y = this.originalPointer.y + change;
+		} else if ( yTop < scrollSensitivity ) {
+			change = this._speed( scrollSensitivity - yTop );
+			newScrollTop = scrollTop - change;
+
+			// Don't do anything unless new value is "real"
+			if ( newScrollTop >= 0 ) {
+				this.scrollParent.scrollTop( newScrollTop );
+				this._speed( scrollSensitivity - yTop );
+				this.originalPointer.y = this.originalPointer.y - change;
+			}
 		}
-		if ("bottom" in obj) {
-			this.offset.click.top = this.helperProportions.height - obj.bottom + this.margins.top;
+
+		// Handle horizontal scrolling
+		if ( xRight < scrollSensitivity ) {
+			change = this._speed( scrollSensitivity - xRight );
+			this.scrollParent.scrollLeft( scrollLeft + change);
+			this.originalPointer.x = this.originalPointer.x + change;
+		} else if ( xLeft < scrollSensitivity ) {
+			change = this._speed( scrollSensitivity - xLeft );
+			newScrollLeft = scrollLeft - change;
+
+			// Don't do anything unless new value is "real"
+			if ( newScrollLeft >= 0 ) {
+				this.scrollParent.scrollLeft( newScrollLeft );
+				this.originalPointer.x = this.originalPointer.x - change;
+			}
 		}
 	},
 
-	_isRootNode: function( element ) {
-		return ( /(html|body)/i ).test( element.tagName ) || element === this.document[ 0 ];
+	_speed: function( distance ) {
+		return this.scrollSpeed + Math.round( distance / 2 );
 	},
 
-	_getParentOffset: function() {
+	// Uses event to determine new position of draggable, before any override
+	// from callbacks
+	// TODO: handle absolute element inside relative parent like a relative element
+	_preparePosition: function( pointerPosition ) {
+		var leftDiff = pointerPosition.x - this.originalPointer.x,
+			topDiff = pointerPosition.y - this.originalPointer.y,
+			newLeft = leftDiff + this.startPosition.left,
+			newTop = topDiff + this.startPosition.top;
+
+		// Save off new values for .css() in various callbacks using this function
+		this.position = {
+			left: newLeft,
+			top: newTop
+		};
 
-		//Get the offsetParent and cache its position
-		var po = this.offsetParent.offset(),
-			document = this.document[ 0 ];
+		// Save off values to compare user override against automatic coordinates
+		this.tempPosition = {
+			left: newLeft,
+			top: newTop
+		};
 
-		// This is a special case where we need to modify a offset calculated on start, since the following happened:
-		// 1. The position of the helper is absolute, so it's position is calculated based on the next positioned parent
-		// 2. The actual offset parent is a child of the scroll parent, and the scroll parent isn't the document, which means that
-		//    the scroll is included in the initial calculation of the offset of the parent, and never recalculated upon drag
-		if(this.cssPosition === "absolute" && this.scrollParent[0] !== document && $.contains(this.scrollParent[0], this.offsetParent[0])) {
-			po.left += this.scrollParent.scrollLeft();
-			po.top += this.scrollParent.scrollTop();
-		}
+		// Refresh offset cache with new positions
+		this.offset.left = this.startOffset.left + leftDiff;
+		this.offset.top = this.startOffset.top + topDiff;
+	},
 
-		if ( this._isRootNode( this.offsetParent[ 0 ] ) ) {
-			po = { top: 0, left: 0 };
-		}
+	// Places draggable where event indicates
+	_setCss: function() {
+		var newLeft = this.position.left,
+			newTop = this.position.top;
 
-		return {
-			top: po.top + (parseInt(this.offsetParent.css("borderTopWidth"),10) || 0),
-			left: po.left + (parseInt(this.offsetParent.css("borderLeftWidth"),10) || 0)
-		};
+		// User overriding left/top so shortcut math is no longer valid
+		if ( this.tempPosition.left !== this.position.left ||
+				this.tempPosition.top !== this.position.top ) {
 
-	},
+			// Reset offset based on difference of expected and overridden values
+			this.offset.left += newLeft - this.tempPosition.left;
+			this.offset.top += newTop - this.tempPosition.top;
+		}
 
-	_getRelativeOffset: function() {
-		if ( this.cssPosition !== "relative" ) {
-			return { top: 0, left: 0 };
+		// TODO: does this work with nested scrollable parents?
+		if ( this.cssPosition !== "fixed" ) {
+			newLeft += this.scrollParent.scrollLeft();
+			newTop += this.scrollParent.scrollTop();
 		}
 
-		var p = this.element.position(),
-			scrollIsRootNode = this._isRootNode( this.scrollParent[ 0 ] );
+		this.dragEl.css({
+			left: newLeft,
+			top: newTop
+		});
+	},
 
-		return {
-			top: p.top - ( parseInt(this.helper.css( "top" ), 10) || 0 ) + ( !scrollIsRootNode ? this.scrollParent.scrollTop() : 0 ),
-			left: p.left - ( parseInt(this.helper.css( "left" ), 10) || 0 ) + ( !scrollIsRootNode ? this.scrollParent.scrollLeft() : 0 )
+	_originalHash: function( pointerPosition ) {
+		var ret = {
+			position: this.position,
+			offset: copy( this.offset ),
+			pointer: copy( pointerPosition )
 		};
 
+		if ( this.options.helper ) {
+			ret.helper = this.dragEl;
+		}
+
+		return ret;
 	},
 
-	_cacheMargins: function() {
-		this.margins = {
-			left: (parseInt(this.element.css("marginLeft"),10) || 0),
-			top: (parseInt(this.element.css("marginTop"),10) || 0),
-			right: (parseInt(this.element.css("marginRight"),10) || 0),
-			bottom: (parseInt(this.element.css("marginBottom"),10) || 0)
-		};
+	_fullHash: function( pointerPosition ) {
+		return $.extend( this._originalHash( pointerPosition ), {
+			originalPosition: copy( this.originalPosition ),
+			originalOffset: copy( this.originalOffset ),
+			originalPointer: copy( this.originalPointer )
+		});
 	},
 
-	_cacheHelperProportions: function() {
-		this.helperProportions = {
-			width: this.helper.outerWidth(),
-			height: this.helper.outerHeight()
-		};
+	_blockFrames: function() {
+		this.iframeBlocks = this.document.find( "iframe" ).map(function() {
+			var iframe = $( this );
+
+			return $( "<div>" )
+				.css( "position", "absolute" )
+				.appendTo( iframe.parent() )
+				.outerWidth( iframe.outerWidth() )
+				.outerHeight( iframe.outerHeight() )
+				.offset( iframe.offset() )[ 0 ];
+		});
 	},
 
-	_setContainment: function() {
+	_unblockFrames: function() {
+		if ( this.iframeBlocks ) {
+			this.iframeBlocks.remove();
+			delete this.iframeBlocks;
+		}
+	},
 
-		var over, c, ce,
-			o = this.options,
-			document = this.document[ 0 ];
+	_destroy: function() {
+		this.element.removeClass( "ui-draggable" );
+		this._super();
+	}
+});
 
-		this.relative_container = null;
+// Add containment option via extension
+$.widget( "ui.draggable", $.ui.draggable, {
+	options: {
+		containment: null
+	},
 
-		if ( !o.containment ) {
-			this.containment = null;
-			return;
-		}
+	_create: function() {
+		this._super();
+		this._on({
+			dragstart: "_setContainment",
+			drag: "_contain"
+		});
+	},
 
-		if ( o.containment === "window" ) {
-			this.containment = [
-				$( window ).scrollLeft() - this.offset.relative.left - this.offset.parent.left,
-				$( window ).scrollTop() - this.offset.relative.top - this.offset.parent.top,
-				$( window ).scrollLeft() + $( window ).width() - this.helperProportions.width - this.margins.left,
-				$( window ).scrollTop() + ( $( window ).height() || document.body.parentNode.scrollHeight ) - this.helperProportions.height - this.margins.top
-			];
-			return;
-		}
+	_setContainment: function( event, ui ) {
+		var offset, left, top, bottom, right,
+			container = this._getContainer();
 
-		if ( o.containment === "document") {
-			this.containment = [
-				0,
-				0,
-				$( document ).width() - this.helperProportions.width - this.margins.left,
-				( $( document ).height() || document.body.parentNode.scrollHeight ) - this.helperProportions.height - this.margins.top
-			];
+		if ( !container ) {
+			this.containment = null;
 			return;
 		}
 
-		if ( o.containment.constructor === Array ) {
-			this.containment = o.containment;
-			return;
+		if ( $.isArray( container ) ) {
+			offset = container.offset();
+			left = offset.left +
+				(parseFloat( $.css( container[ 0 ], "borderLeftWidth", true ) ) || 0) +
+				(parseFloat( $.css( container[ 0 ], "paddingLeft", true ) ) || 0);
+			top = offset.top +
+				(parseFloat( $.css( container[ 0 ], "borderTopWidth", true ) ) || 0) +
+				(parseFloat( $.css( container[ 0 ], "paddingTop", true ) ) || 0);
+			right = left + container.width();
+			bottom = top + container.height();
+		} else {
+			left = container[ 0 ];
+			top = container[ 1 ];
+			right = container[ 2 ];
+			bottom = container[ 3 ];
 		}
 
-		if ( o.containment === "parent" ) {
-			o.containment = this.helper[ 0 ].parentNode;
-		}
+		this.containment = {
+			left: left,
+			top: top,
+			right: right,
+			bottom: bottom,
+			leftDiff: ui.originalOffset.left - ui.originalPosition.left,
+			topDiff: ui.originalOffset.top - ui.originalPosition.top,
+			width: this.dragDimensions.width,
+			height: this.dragDimensions.height
+		};
+	},
 
-		c = $( o.containment );
-		ce = c[ 0 ];
+	_contain: function( event, ui ) {
+		var containment = this.containment;
 
-		if( !ce ) {
+		if ( !containment ) {
 			return;
 		}
 
-		over = c.css( "overflow" ) !== "hidden";
-
-		this.containment = [
-			( parseInt( c.css( "borderLeftWidth" ), 10 ) || 0 ) + ( parseInt( c.css( "paddingLeft" ), 10 ) || 0 ),
-			( parseInt( c.css( "borderTopWidth" ), 10 ) || 0 ) + ( parseInt( c.css( "paddingTop" ), 10 ) || 0 ) ,
-			( over ? Math.max( ce.scrollWidth, ce.offsetWidth ) : ce.offsetWidth ) - ( parseInt( c.css( "borderRightWidth" ), 10 ) || 0 ) - ( parseInt( c.css( "paddingRight" ), 10 ) || 0 ) - this.helperProportions.width - this.margins.left - this.margins.right,
-			( over ? Math.max( ce.scrollHeight, ce.offsetHeight ) : ce.offsetHeight ) - ( parseInt( c.css( "borderBottomWidth" ), 10 ) || 0 ) - ( parseInt( c.css( "paddingBottom" ), 10 ) || 0 ) - this.helperProportions.height - this.margins.top  - this.margins.bottom
-		];
-		this.relative_container = c;
+		ui.position.left = Math.max( ui.position.left,
+			containment.left - containment.leftDiff );
+		ui.position.left = Math.min( ui.position.left,
+			containment.right - containment.width - containment.leftDiff );
+		ui.position.top = Math.max( ui.position.top,
+			containment.top - containment.topDiff );
+		ui.position.top = Math.min( ui.position.top,
+			containment.bottom - containment.height - containment.topDiff );
 	},
 
-	_convertPositionTo: function(d, pos) {
+	_getContainer: function() {
+		var container,
+			containment = this.options.containment;
 
-		if(!pos) {
-			pos = this.position;
+		if ( !containment ) {
+			container = null;
+		} else if ( containment === "parent" ) {
+			container = this.element.parent();
+		} else {
+			container = $( containment );
+			if ( !container.length ) {
+				container = null;
+			}
 		}
 
-		var mod = d === "absolute" ? 1 : -1,
-			scrollIsRootNode = this._isRootNode( this.scrollParent[ 0 ] );
+		return container;
+	}
+});
 
-		return {
-			top: (
-				pos.top	+																// The absolute mouse position
-				this.offset.relative.top * mod +										// Only for relative positioned nodes: Relative offset from element to offset parent
-				this.offset.parent.top * mod -										// The offsetParent's offset without borders (offset + border)
-				( ( this.cssPosition === "fixed" ? -this.offset.scroll.top : ( scrollIsRootNode ? 0 : this.offset.scroll.top ) ) * mod)
-			),
-			left: (
-				pos.left +																// The absolute mouse position
-				this.offset.relative.left * mod +										// Only for relative positioned nodes: Relative offset from element to offset parent
-				this.offset.parent.left * mod	-										// The offsetParent's offset without borders (offset + border)
-				( ( this.cssPosition === "fixed" ? -this.offset.scroll.left : ( scrollIsRootNode ? 0 : this.offset.scroll.left ) ) * mod)
-			)
-		};
+// DEPRECATED
+if ( $.uiBackCompat !== false ) {
 
-	},
+	// appendTo "parent" value
+	$.widget( "ui.draggable", $.ui.draggable, {
+		_appendTo: function() {
+			var element = this.options.appendTo;
 
-	_generatePosition: function( event, constrainPosition ) {
+			// This should only happen via _createHelper()
+			if ( element === null ) {
+				return this.element.parent();
+			}
 
-		var containment, co, top, left,
-			o = this.options,
-			scrollIsRootNode = this._isRootNode( this.scrollParent[ 0 ] ),
-			pageX = event.pageX,
-			pageY = event.pageY;
+			if ( element === "parent" ) {
+				element = this.dragEl.parent();
+			}
 
-		// Cache the scroll
-		if ( !scrollIsRootNode || !this.offset.scroll ) {
-			this.offset.scroll = {
-				top: this.scrollParent.scrollTop(),
-				left: this.scrollParent.scrollLeft()
-			};
+			return element;
 		}
+	});
 
-		/*
-		 * - Position constraining -
-		 * Constrain the position to a mix of grid, containment.
-		 */
-
-		// If we are not dragging yet, we won't check for options
-		if ( constrainPosition ) {
-			if ( this.containment ) {
-				if ( this.relative_container ){
-					co = this.relative_container.offset();
-					containment = [
-						this.containment[ 0 ] + co.left,
-						this.containment[ 1 ] + co.top,
-						this.containment[ 2 ] + co.left,
-						this.containment[ 3 ] + co.top
-					];
-				}
-				else {
-					containment = this.containment;
-				}
+	// helper "original" or "clone" value + helper return value
+	$.widget( "ui.draggable", $.ui.draggable, {
+		_create: function() {
+			if ( this.options.helper === "original" ) {
+				this.options.helper = false;
+			}
 
-				if(event.pageX - this.offset.click.left < containment[0]) {
-					pageX = containment[0] + this.offset.click.left;
-				}
-				if(event.pageY - this.offset.click.top < containment[1]) {
-					pageY = containment[1] + this.offset.click.top;
-				}
-				if(event.pageX - this.offset.click.left > containment[2]) {
-					pageX = containment[2] + this.offset.click.left;
-				}
-				if(event.pageY - this.offset.click.top > containment[3]) {
-					pageY = containment[3] + this.offset.click.top;
-				}
+			if ( this.options.helper === "clone" ) {
+				this.options.helper = true;
 			}
 
-			if(o.grid) {
-				//Check for grid elements set to 0 to prevent divide by 0 error causing invalid argument errors in IE (see ticket #6950)
-				top = o.grid[1] ? this.originalPageY + Math.round((pageY - this.originalPageY) / o.grid[1]) * o.grid[1] : this.originalPageY;
-				pageY = containment ? ((top - this.offset.click.top >= containment[1] || top - this.offset.click.top > containment[3]) ? top : ((top - this.offset.click.top >= containment[1]) ? top - o.grid[1] : top + o.grid[1])) : top;
+			this._super();
+		},
 
-				left = o.grid[0] ? this.originalPageX + Math.round((pageX - this.originalPageX) / o.grid[0]) * o.grid[0] : this.originalPageX;
-				pageX = containment ? ((left - this.offset.click.left >= containment[0] || left - this.offset.click.left > containment[2]) ? left : ((left - this.offset.click.left >= containment[0]) ? left - o.grid[0] : left + o.grid[0])) : left;
-			}
+		_originalHash: function() {
+			var ret = this._superApply( arguments );
 
-			if ( o.axis === "y" ) {
-				pageX = this.originalPageX;
+			if ( !ret.helper ) {
+				ret.helper = this.element;
 			}
 
-			if ( o.axis === "x" ) {
-				pageY = this.originalPageY;
+			return ret;
+		},
+
+		_setOption: function( key, value ) {
+			if ( key === "helper" && value === "clone" ) {
+				value = true;
+			} else if ( key === "helper" && value === "original" ) {
+				value = false;
 			}
-		}
 
-		return {
-			top: (
-				pageY -																	// The absolute mouse position
-				this.offset.click.top	-												// Click offset (relative to the element)
-				this.offset.relative.top -												// Only for relative positioned nodes: Relative offset from element to offset parent
-				this.offset.parent.top +												// The offsetParent's offset without borders (offset + border)
-				( this.cssPosition === "fixed" ? -this.offset.scroll.top : ( scrollIsRootNode ? 0 : this.offset.scroll.top ) )
-			),
-			left: (
-				pageX -																	// The absolute mouse position
-				this.offset.click.left -												// Click offset (relative to the element)
-				this.offset.relative.left -												// Only for relative positioned nodes: Relative offset from element to offset parent
-				this.offset.parent.left +												// The offsetParent's offset without borders (offset + border)
-				( this.cssPosition === "fixed" ? -this.offset.scroll.left : ( scrollIsRootNode ? 0 : this.offset.scroll.left ) )
-			)
-		};
+			this._super( key, value );
+		}
+	});
 
-	},
+	// axis option
+	$.widget( "ui.draggable", $.ui.draggable, {
+		options: {
+			axis: false
+		},
 
-	_clear: function() {
-		this.helper.removeClass("ui-draggable-dragging");
-		if(this.helper[0] !== this.element[0] && !this.cancelHelperRemoval) {
-			this.helper.remove();
-		}
-		this.helper = null;
-		this.cancelHelperRemoval = false;
-		if ( this.destroyOnClear ) {
-			this.destroy();
-		}
-	},
+		_create: function() {
+			this._super();
 
-	// From now on bulk stuff - mainly helpers
+			this._on({
+				drag: function( event, ui ) {
+					if ( this.options.axis === "x" ) {
+						ui.position.top = ui.originalPosition.top;
+					}
 
-	_trigger: function(type, event, ui) {
-		ui = ui || this._uiHash();
-		$.ui.plugin.call( this, type, [ event, ui, this ], true );
-		//The absolute position has to be recalculated after plugins
-		if(type === "drag") {
-			this.positionAbs = this._convertPositionTo("absolute");
+					if ( this.options.axis === "y" ) {
+						ui.position.left = ui.originalPosition.left;
+					}
+				}
+			});
 		}
-		return $.Widget.prototype._trigger.call(this, type, event, ui);
-	},
+	});
 
-	plugins: {},
+	// cancel option
+	$.widget( "ui.draggable", $.ui.draggable, {
+		options: {
+			cancel: null
+		},
 
-	_uiHash: function() {
-		return {
-			helper: this.helper,
-			position: this.position,
-			originalPosition: this.originalPosition,
-			offset: this.positionAbs
-		};
-	}
+		_create: function() {
+			if ( this.options.cancel !== null ) {
+				this.options.exclude = this.options.cancel;
+			}
 
-});
+			this._super();
+		},
 
-$.ui.plugin.add("draggable", "connectToSortable", {
-	start: function( event, ui, inst ) {
-
-		var o = inst.options,
-			uiSortable = $.extend({}, ui, { item: inst.element });
-		inst.sortables = [];
-		$(o.connectToSortable).each(function() {
-			var sortable = $( this ).sortable( "instance" );
-			if (sortable && !sortable.options.disabled) {
-				inst.sortables.push({
-					instance: sortable,
-					shouldRevert: sortable.options.revert
-				});
-				sortable.refreshPositions();	// Call the sortable's refreshPositions at drag start to refresh the containerCache since the sortable container cache is used in drag and needs to be up to date (this will ensure it's initialised as well as being kept in step with any changes that might have happened on the page).
-				sortable._trigger("activate", event, uiSortable);
+		_setOption: function( key, value ) {
+			if ( key === "cancel" ) {
+				key = "exclude";
 			}
-		});
 
-	},
-	stop: function( event, ui, inst ) {
+			this._super( key, value );
+			this.options.cancel = this.options.exclude;
+		}
+	});
 
-		//If we are still over the sortable, we fake the stop event of the sortable, but also remove helper
-		var uiSortable = $.extend( {}, ui, {
-			item: inst.element
-		});
+	// cursor option
+	$.widget( "ui.draggable", $.ui.draggable, {
+		options: {
+			cursor: "auto"
+		},
 
-		$.each(inst.sortables, function() {
-			if(this.instance.isOver) {
+		_create: function() {
+			var startCursor, body;
 
-				this.instance.isOver = 0;
+			this._super();
 
-				inst.cancelHelperRemoval = true; //Don't remove the helper in the draggable instance
-				this.instance.cancelHelperRemoval = false; //Remove it in the sortable instance (so sortable plugins like revert still work)
+			body = $( this.document[ 0 ].body );
 
-				//The sortable revert is supported, and we have to set a temporary dropped variable on the draggable to support revert: "valid/invalid"
-				if(this.shouldRevert) {
-					this.instance.options.revert = this.shouldRevert;
+			this._on({
+				// Cache original cursor to set back
+				dragbeforestart: function() {
+					if ( this.options.cursor ) {
+						startCursor = body[ 0 ].style.cursor;
+						body.css( "cursor", this.options.cursor );
+					}
+				},
+
+				// Set back cursor to whatever default was
+				dragstop: function() {
+					if ( this.options.cursor ) {
+						body.css( "cursor", startCursor );
+					}
 				}
+			});
+		}
+	});
 
-				//Trigger the stop of the sortable
-				this.instance._mouseStop(event);
+	// cursorAt option
+	$.widget( "ui.draggable", $.ui.draggable, {
+		options: {
+			cursorAt: false
+		},
 
-				this.instance.options.helper = this.instance.options._helper;
+		_create: function() {
+			this._super();
 
-				//If the helper has been the original item, restore properties in the sortable
-				if(inst.options.helper === "original") {
-					this.instance.currentItem.css({ top: "auto", left: "auto" });
-				}
+			this._on({
+				dragbeforestart: function( event, ui ) {
+					var cursorAt = this.options.cursorAt;
 
-			} else {
-				this.instance.cancelHelperRemoval = false; //Remove the helper in the sortable instance
-				this.instance._trigger("deactivate", event, uiSortable);
-			}
+					if ( !cursorAt ) {
+						return;
+					}
 
-		});
+					if ( typeof cursorAt === "string" ) {
+						cursorAt = cursorAt.split(" ");
+					}
+					if ( $.isArray( cursorAt ) ) {
+						cursorAt = {
+							left: +cursorAt[ 0 ],
+							top: +cursorAt[ 1 ] || 0
+						};
+					}
 
-	},
-	drag: function( event, ui, inst ) {
-
-		var that = this;
-
-		$.each(inst.sortables, function() {
-
-			var innermostIntersecting = false,
-				thisSortable = this;
-
-			//Copy over some variables to allow calling the sortable's native _intersectsWith
-			this.instance.positionAbs = inst.positionAbs;
-			this.instance.helperProportions = inst.helperProportions;
-			this.instance.offset.click = inst.offset.click;
-
-			if(this.instance._intersectsWith(this.instance.containerCache)) {
-				innermostIntersecting = true;
-				$.each(inst.sortables, function () {
-					this.instance.positionAbs = inst.positionAbs;
-					this.instance.helperProportions = inst.helperProportions;
-					this.instance.offset.click = inst.offset.click;
-					if (this !== thisSortable &&
-						this.instance._intersectsWith(this.instance.containerCache) &&
-						$.contains(thisSortable.instance.element[0], this.instance.element[0])
-					) {
-						innermostIntersecting = false;
+					if ( "top" in cursorAt ) {
+						ui.position.top += ui.pointer.y -
+							ui.offset.top - cursorAt.top;
 					}
-					return innermostIntersecting;
-				});
-			}
+					if ( "left" in cursorAt ) {
+						ui.position.left += ui.pointer.x -
+							ui.offset.left - cursorAt.left;
+					}
+					if ( "bottom" in cursorAt ) {
+						ui.position.top += ui.pointer.y -
+							ui.offset.top - this.dragDimensions.height +
+							cursorAt.bottom;
+					}
+					if ( "right" in cursorAt ) {
+						ui.position.left += ui.pointer.x -
+							ui.offset.left - this.dragDimensions.width +
+							cursorAt.right;
+					}
+				}
+			});
+		}
+	});
 
+	// grid option
+	$.widget( "ui.draggable", $.ui.draggable, {
+		options: {
+			grid: false
+		},
 
-			if(innermostIntersecting) {
-				//If it intersects, we use a little isOver variable and set it once, so our move-in stuff gets fired only once
-				if(!this.instance.isOver) {
+		_create: function() {
+			var currentX, currentY;
 
-					this.instance.isOver = 1;
-					//Now we fake the start of dragging for the sortable instance,
-					//by cloning the list group item, appending it to the sortable and using it as inst.currentItem
-					//We can then fire the start event of the sortable with our passed browser event, and our own helper (so it doesn't create a new one)
-					this.instance.currentItem = $(that).clone().removeAttr("id").appendTo(this.instance.element).data("ui-sortable-item", true);
-					this.instance.options._helper = this.instance.options.helper; //Store helper option to later restore it
-					this.instance.options.helper = function() { return ui.helper[0]; };
+			this._super();
 
-					event.target = this.instance.currentItem[0];
-					this.instance._mouseCapture(event, true);
-					this.instance._mouseStart(event, true, true);
+			this._on({
+				dragbeforestart: function( event, ui ) {
+					if ( !this.options.grid ) {
+						return;
+					}
 
-					//Because the browser event is way off the new appended portlet, we modify a couple of variables to reflect the changes
-					this.instance.offset.click.top = inst.offset.click.top;
-					this.instance.offset.click.left = inst.offset.click.left;
-					this.instance.offset.parent.left -= inst.offset.parent.left - this.instance.offset.parent.left;
-					this.instance.offset.parent.top -= inst.offset.parent.top - this.instance.offset.parent.top;
+					// Save off the start position,
+					// which may be overwritten during drag
+					currentX = ui.position.left;
+					currentY = ui.position.top;
+				},
 
-					inst._trigger("toSortable", event);
-					inst.dropped = this.instance.element; //draggable revert needs that
-					//hack so receive/update callbacks work (mostly)
-					inst.currentItem = inst.element;
-					this.instance.fromOutside = inst;
+				drag: function( event, ui ) {
+					if ( !this.options.grid ) {
+						return;
+					}
 
-				}
+					// Save off the intended intervals
+					var x = this.options.grid[ 0 ],
+						y = this.options.grid[ 1 ];
+
+					// Check that user is at least half way to next point on x axis
+					if ( x ) {
+						if ( ui.position.left - currentX >= x / 2 ) {
+							currentX = currentX + x;
+						}	else if ( currentX - ui.position.left >= x / 2 ) {
+							currentX = currentX - x;
+						}
+					}
+
+					// Check that user is at least half way to next point on y axis
+					if ( y ) {
+						if ( ui.position.top - currentY >= y / 2 ) {
+							currentY = currentY + y;
+						} else if ( currentY - ui.position.top >= y / 2 ) {
+							currentY = currentY - y;
+						}
+					}
 
-				//Provided we did all the previous steps, we can fire the drag event of the sortable on every draggable drag, when it intersects with the sortable
-				if(this.instance.currentItem) {
-					this.instance._mouseDrag(event);
+					// Force the draggable to the appropriate spot on the grid
+					ui.position.left = currentX;
+					ui.position.top = currentY;
 				}
+			});
+		}
+	});
 
-			} else {
+	// opacity option
+	$.widget( "ui.draggable", $.ui.draggable, {
+		options: {
+			opacity: false
+		},
 
-				//If it doesn't intersect with the sortable, and it intersected before,
-				//we fake the drag stop of the sortable, but make sure it doesn't remove the helper by using cancelHelperRemoval
-				if(this.instance.isOver) {
+		_create: function() {
+			var originalOpacity;
 
-					this.instance.isOver = 0;
-					this.instance.cancelHelperRemoval = true;
+			this._super();
 
-					//Prevent reverting on this forced stop
-					this.instance.options.revert = false;
+			this._on({
+				dragstart: function() {
+					if ( !this.options.opacity ) {
+						return;
+					}
 
-					// The out event needs to be triggered independently
-					this.instance._trigger("out", event, this.instance._uiHash(this.instance));
+					// Cache the original opacity of draggable element to reset later
+					originalOpacity = this.dragEl.css( "opacity" );
 
-					this.instance._mouseStop(event, true);
-					this.instance.options.helper = this.instance.options._helper;
+					// Set draggable element to new opacity
+					this.dragEl.css( "opacity", this.options.opacity );
+				},
 
-					//Now we remove our currentItem, the list group clone again, and the placeholder, and animate the helper back to it's original size
-					this.instance.currentItem.remove();
-					if(this.instance.placeholder) {
-						this.instance.placeholder.remove();
+				dragstop: function() {
+					if ( !this.options.opacity ) {
+						return;
 					}
 
-					inst._trigger("fromSortable", event);
-					inst.dropped = false; //draggable revert needs that
+					// Reset opacity
+					this.dragEl.css( "opacity", originalOpacity );
 				}
+			});
+		}
+	});
 
-			}
+	// TODO: handle droppables
+	// revert + revertDuration options
+	$.widget( "ui.draggable", $.ui.draggable, {
+		options: {
+			revert: false,
+			revertDuration: 500
+		},
 
-		});
+		_create: function() {
+			var originalLeft, originalTop, originalPosition;
 
-	}
-});
+			this._super();
 
-$.ui.plugin.add("draggable", "cursor", {
-	start: function( event, ui, instance ) {
-		var t = $( "body" ),
-			o = instance.options;
+			this._on({
+				dragbeforestart: function() {
+					if ( !this.options.revert ) {
+						return;
+					}
 
-		if (t.css("cursor")) {
-			o._cursor = t.css("cursor");
-		}
-		t.css("cursor", o.cursor);
-	},
-	stop: function( event, ui, instance ) {
-		var o = instance.options;
-		if (o._cursor) {
-			$("body").css("cursor", o._cursor);
-		}
-	}
-});
+					// Cache the original css of draggable element to reset later
+					originalLeft = this.dragEl.css( "left" );
+					originalTop = this.dragEl.css( "top" );
+					originalPosition = this.dragEl.css( "position" );
+				},
 
-$.ui.plugin.add("draggable", "opacity", {
-	start: function( event, ui, instance ) {
-		var t = $( ui.helper ),
-			o = instance.options;
-		if(t.css("opacity")) {
-			o._opacity = t.css("opacity");
-		}
-		t.css("opacity", o.opacity);
-	},
-	stop: function( event, ui, instance ) {
-		var o = instance.options;
-		if(o._opacity) {
-			$(ui.helper).css("opacity", o._opacity);
-		}
-	}
-});
+				dragstop: function() {
+					if ( !this.options.revert ) {
+						return;
+					}
 
-$.ui.plugin.add("draggable", "scroll", {
-	start: function( event, ui, i ) {
-		if( i.scrollParent[ 0 ] !== i.document[ 0 ] && i.scrollParent[ 0 ].tagName !== "HTML" ) {
-			i.overflowOffset = i.scrollParent.offset();
-		}
-	},
-	drag: function( event, ui, i  ) {
-
-		var o = i.options,
-			scrolled = false,
-			document = i.document[ 0 ];
-
-		if( i.scrollParent[ 0 ] !== document && i.scrollParent[ 0 ].tagName !== "HTML" ) {
-			if(!o.axis || o.axis !== "x") {
-				if((i.overflowOffset.top + i.scrollParent[0].offsetHeight) - event.pageY < o.scrollSensitivity) {
-					i.scrollParent[0].scrollTop = scrolled = i.scrollParent[0].scrollTop + o.scrollSpeed;
-				} else if(event.pageY - i.overflowOffset.top < o.scrollSensitivity) {
-					i.scrollParent[0].scrollTop = scrolled = i.scrollParent[0].scrollTop - o.scrollSpeed;
+					// Reset to before drag
+					this.dragEl.animate({
+						left: originalLeft,
+						top: originalTop,
+						position: originalPosition
+					}, this.options.revertDuration );
 				}
-			}
+			});
+		}
+	});
+
+	// zIndex option
+	$.widget( "ui.draggable", $.ui.draggable, {
+		options: {
+			zIndex: false
+		},
 
-			if(!o.axis || o.axis !== "y") {
-				if((i.overflowOffset.left + i.scrollParent[0].offsetWidth) - event.pageX < o.scrollSensitivity) {
-					i.scrollParent[0].scrollLeft = scrolled = i.scrollParent[0].scrollLeft + o.scrollSpeed;
-				} else if(event.pageX - i.overflowOffset.left < o.scrollSensitivity) {
-					i.scrollParent[0].scrollLeft = scrolled = i.scrollParent[0].scrollLeft - o.scrollSpeed;
+		_create: function() {
+			var originalZindex;
+
+			this._super();
+
+			this._on({
+				dragstart: function() {
+					if ( !this.options.zIndex ) {
+						return;
+					}
+
+					// Cache the original zIndex of draggable element to reset later
+					originalZindex = this.dragEl.css( "z-index" );
+
+					// Set draggable element to new zIndex
+					this.dragEl.css( "z-index", this.options.zIndex );
+				},
+
+				dragstop: function() {
+					if ( !this.options.zIndex ) {
+						return;
+					}
+
+					// Reset zIndex
+					this.dragEl.css( "z-index", originalZindex );
 				}
+			});
+		}
+	});
+
+	// scope option
+	$.widget( "ui.draggable", $.ui.draggable, {
+		options: {
+			scope: "default"
+		}
+	});
+
+	// scroll + scrollSensitivity + scrollSpeedType option
+	$.widget( "ui.draggable", $.ui.draggable, {
+		options: {
+			scroll: true,
+			scrollSpeed: 20,
+			scrollSensitivity: 20
+		},
+
+		_speed: function( distance ) {
+			if ( this.options.scrollSpeed !== null ) {
+				this.scrollSpeed = this.options.scrollSpeed;
+
+				// Undo calculation that makes things go faster as distance increases
+				distance = 0;
 			}
 
-		} else {
+			return this._super( distance );
+		},
 
-			if(!o.axis || o.axis !== "x") {
-				if(event.pageY - $(document).scrollTop() < o.scrollSensitivity) {
-					scrolled = $(document).scrollTop($(document).scrollTop() - o.scrollSpeed);
-				} else if($(window).height() - (event.pageY - $(document).scrollTop()) < o.scrollSensitivity) {
-					scrolled = $(document).scrollTop($(document).scrollTop() + o.scrollSpeed);
-				}
+		_handleScrolling: function( pointerPosition ) {
+			if ( !this.options.scroll ) {
+				return;
 			}
 
-			if(!o.axis || o.axis !== "y") {
-				if(event.pageX - $(document).scrollLeft() < o.scrollSensitivity) {
-					scrolled = $(document).scrollLeft($(document).scrollLeft() - o.scrollSpeed);
-				} else if($(window).width() - (event.pageX - $(document).scrollLeft()) < o.scrollSensitivity) {
-					scrolled = $(document).scrollLeft($(document).scrollLeft() + o.scrollSpeed);
-				}
+			if ( this.options.scrollSensitivity !== null ) {
+				this.scrollSensitivity = this.options.scrollSensitivity;
 			}
 
+			this._super( pointerPosition );
 		}
+	});
 
-		if(scrolled !== false && $.ui.ddmanager && !o.dropBehaviour) {
-			$.ui.ddmanager.prepareOffsets(i, event);
-		}
+	// stack option
+	$.widget( "ui.draggable", $.ui.draggable, {
+		options: {
+			stack: false
+		},
 
-	}
-});
+		_create: function() {
+			this._super();
 
-$.ui.plugin.add("draggable", "snap", {
-	start: function( event, ui, i ) {
+			this._on({
+				dragbeforestart: function() {
+					var group, min,
+						stack = this.options.stack;
 
-		var o = i.options;
+					if ( !stack ) {
+						return;
+					}
 
-		i.snapElements = [];
+					group = $.makeArray( $( stack ) ).sort(function( a, b ) {
+						var aZIndex = parseInt( $( a ).css( "zIndex" ), 10 ) || 0,
+							bZIndex = parseInt( $( b ).css( "zIndex" ), 10 ) || 0;
+						return aZIndex - bZIndex;
+					});
 
-		$(o.snap.constructor !== String ? ( o.snap.items || ":data(ui-draggable)" ) : o.snap).each(function() {
-			var $t = $(this),
-				$o = $t.offset();
-			if(this !== i.element[0]) {
-				i.snapElements.push({
-					item: this,
-					width: $t.outerWidth(), height: $t.outerHeight(),
-					top: $o.top, left: $o.left
-				});
-			}
-		});
+					if ( !group.length ) {
+						return;
+					}
 
-	},
-	drag: function( event, ui, inst ) {
+					min = parseInt( group[ 0 ].style.zIndex, 10 ) || 0;
 
-		var ts, bs, ls, rs, l, r, t, b, i, first,
-			o = inst.options,
-			d = o.snapTolerance,
-			x1 = ui.offset.left, x2 = x1 + inst.helperProportions.width,
-			y1 = ui.offset.top, y2 = y1 + inst.helperProportions.height;
+					$( group ).each(function( i ) {
+						this.style.zIndex = min + i;
+					});
 
-		for (i = inst.snapElements.length - 1; i >= 0; i--){
+					this.element.css( "zIndex", min + group.length );
+				}
+			});
+		}
+	});
 
-			l = inst.snapElements[i].left;
-			r = l + inst.snapElements[i].width;
-			t = inst.snapElements[i].top;
-			b = t + inst.snapElements[i].height;
+	// TODO: cleanup
+	// snap, snapMode, and snapTolerance options
+	$.widget( "ui.draggable", $.ui.draggable, {
+		options: {
+			snap: false,
+			snapMode: "both",
+			snapTolerance: 20
+		},
 
-			if ( x2 < l - d || x1 > r + d || y2 < t - d || y1 > b + d || !$.contains( inst.snapElements[ i ].item.ownerDocument, inst.snapElements[ i ].item ) ) {
-				if(inst.snapElements[i].snapping) {
-					(inst.options.snap.release && inst.options.snap.release.call(inst.element, event, $.extend(inst._uiHash(), { snapItem: inst.snapElements[i].item })));
-				}
-				inst.snapElements[i].snapping = false;
-				continue;
-			}
+		_create: function() {
+			var inst = this,
+				snapElements;
 
-			if(o.snapMode !== "inner") {
-				ts = Math.abs(t - y2) <= d;
-				bs = Math.abs(b - y1) <= d;
-				ls = Math.abs(l - x2) <= d;
-				rs = Math.abs(r - x1) <= d;
-				if(ts) {
-					ui.position.top = inst._convertPositionTo("relative", { top: t - inst.helperProportions.height, left: 0 }).top - inst.margins.top;
-				}
-				if(bs) {
-					ui.position.top = inst._convertPositionTo("relative", { top: b, left: 0 }).top - inst.margins.top;
+			this._super();
+
+			this.element.on( "dragstart", function() {
+
+				// Nothing to do
+				if ( !inst.options.snap ) {
+					return;
 				}
-				if(ls) {
-					ui.position.left = inst._convertPositionTo("relative", { top: 0, left: l - inst.helperProportions.width }).left - inst.margins.left;
+
+				// Reset snapElements on every start in case there have been changes
+				snapElements = [];
+
+				// Select either all draggable elements, or the selector that was passed in
+				$( inst.options.snap === true ? ":data(ui-draggable)" : inst.options.snap ).each(function() {
+
+					var el = $(this),
+						offset = el.offset();
+
+					// Don't add this draggable to list of elements for snapping
+					if ( this === inst.element[0] ) {
+						return;
+					}
+
+					// Save off elements dimensions for later
+					snapElements.push({
+						item: this,
+						width: el.outerWidth(),
+						height: el.outerHeight(),
+						top: offset.top,
+						left: offset.left
+					});
+
+				});
+
+				inst.margins = {
+					left: (parseInt(inst.element.css("marginLeft"),10) || 0),
+					top: (parseInt(inst.element.css("marginTop"),10) || 0),
+					right: (parseInt(inst.element.css("marginRight"),10) || 0),
+					bottom: (parseInt(inst.element.css("marginBottom"),10) || 0)
+				};
+
+			});
+
+			this.element.on( "drag", function( event, ui ) {
+
+				// Nothing to do
+				if ( !inst.options.snap ) {
+					return;
 				}
-				if(rs) {
-					ui.position.left = inst._convertPositionTo("relative", { top: 0, left: r }).left - inst.margins.left;
+
+				var ts, bs, ls, rs, l, r, t, b, i, first,
+					o = inst.options,
+					d = o.snapTolerance,
+					x1 = ui.offset.left, x2 = x1 + inst.dragDimensions.width,
+					y1 = ui.offset.top, y2 = y1 + inst.dragDimensions.height;
+
+				for (i = snapElements.length - 1; i >= 0; i--){
+					l = snapElements[i].left;
+					r = l + snapElements[i].width;
+					t = snapElements[i].top;
+					b = t + snapElements[i].height;
+
+					//Yes, I know, this is insane ;)
+					if (!((l - d < x1 && x1 < r + d && t - d < y1 && y1 < b + d) || (l - d < x1 && x1 < r + d && t - d < y2 && y2 < b + d) || (l - d < x2 && x2 < r + d && t - d < y1 && y1 < b + d) || (l - d < x2 && x2 < r + d && t - d < y2 && y2 < b + d))) {
+						if (snapElements[i].snapping) {
+							(inst.options.snap.release && inst.options.snap.release.call(inst.element, event, $.extend(inst._uiHash(), { snapItem: snapElements[i].item })));
+						}
+						snapElements[i].snapping = false;
+						continue;
+					}
+
+					if (o.snapMode !== "inner") {
+						ts = Math.abs(t - y2) <= d;
+						bs = Math.abs(b - y1) <= d;
+						ls = Math.abs(l - x2) <= d;
+						rs = Math.abs(r - x1) <= d;
+						if (ts) {
+							ui.position.top = inst._convertPositionTo("relative", { top: t - inst.dragDimensions.height, left: 0 }).top - inst.margins.top;
+						}
+						if (bs) {
+							ui.position.top = inst._convertPositionTo("relative", { top: b, left: 0 }).top - inst.margins.top;
+						}
+						if (ls) {
+							ui.position.left = inst._convertPositionTo("relative", { top: 0, left: l - inst.dragDimensions.width }).left - inst.margins.left;
+						}
+						if (rs) {
+							ui.position.left = inst._convertPositionTo("relative", { top: 0, left: r }).left - inst.margins.left;
+						}
+					}
+
+					first = (ts || bs || ls || rs);
+
+					if (o.snapMode !== "outer") {
+						ts = Math.abs(t - y1) <= d;
+						bs = Math.abs(b - y2) <= d;
+						ls = Math.abs(l - x1) <= d;
+						rs = Math.abs(r - x2) <= d;
+						if (ts) {
+							ui.position.top = inst._convertPositionTo("relative", { top: t, left: 0 }).top - inst.margins.top;
+						}
+						if (bs) {
+							ui.position.top = inst._convertPositionTo("relative", { top: b - inst.dragDimensions.height, left: 0 }).top - inst.margins.top;
+						}
+						if (ls) {
+							ui.position.left = inst._convertPositionTo("relative", { top: 0, left: l }).left - inst.margins.left;
+						}
+						if (rs) {
+							ui.position.left = inst._convertPositionTo("relative", { top: 0, left: r - inst.dragDimensions.width }).left - inst.margins.left;
+						}
+					}
+
+					if (!snapElements[i].snapping && (ts || bs || ls || rs || first)) {
+						(inst.options.snap.snap && inst.options.snap.snap.call(inst.element, event, $.extend(inst._uiHash(), { snapItem: snapElements[i].item })));
+					}
+					snapElements[i].snapping = (ts || bs || ls || rs || first);
 				}
+			});
+		},
+
+		_convertPositionTo: function(d, pos) {
+			if (!pos) {
+				pos = this.position;
 			}
 
-			first = (ts || bs || ls || rs);
+			var mod = d === "absolute" ? 1 : -1,
+				offset = {},
+				scroll = this.cssPosition === "absolute" && !(this.scrollParent[0] !== document && $.contains(this.scrollParent[0], this.offsetParent[0])) ? this.offsetParent : this.scrollParent, scrollIsRootNode = (/(html|body)/i).test(scroll[0].tagName);
 
-			if(o.snapMode !== "outer") {
-				ts = Math.abs(t - y1) <= d;
-				bs = Math.abs(b - y2) <= d;
-				ls = Math.abs(l - x1) <= d;
-				rs = Math.abs(r - x2) <= d;
-				if(ts) {
-					ui.position.top = inst._convertPositionTo("relative", { top: t, left: 0 }).top - inst.margins.top;
-				}
-				if(bs) {
-					ui.position.top = inst._convertPositionTo("relative", { top: b - inst.helperProportions.height, left: 0 }).top - inst.margins.top;
-				}
-				if(ls) {
-					ui.position.left = inst._convertPositionTo("relative", { top: 0, left: l }).left - inst.margins.left;
-				}
-				if(rs) {
-					ui.position.left = inst._convertPositionTo("relative", { top: 0, left: r - inst.helperProportions.width }).left - inst.margins.left;
-				}
+			$.extend(offset, {
+				parent: this._getParentOffset(),
+				relative: this._getRelativeOffset() //This is a relative to absolute position minus the actual position calculation - only used for relative positioned helper
+			});
+
+			return {
+				top: (
+					pos.top	+																// The absolute mouse position
+					offset.relative.top * mod +										// Only for relative positioned nodes: Relative offset from element to offset parent
+					offset.parent.top * mod -										// The offsetParent's offset without borders (offset + border)
+					( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollTop() : ( scrollIsRootNode ? 0 : scroll.scrollTop() ) ) * mod)
+				),
+				left: (
+					pos.left +																// The absolute mouse position
+					offset.relative.left * mod +										// Only for relative positioned nodes: Relative offset from element to offset parent
+					offset.parent.left * mod	-										// The offsetParent's offset without borders (offset + border)
+					( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : scroll.scrollLeft() ) * mod)
+				)
+			};
+		},
+
+		_getParentOffset: function() {
+
+			//Get the offsetParent and cache its position
+			this.offsetParent = this.dragEl.offsetParent();
+			var po = this.offsetParent.offset();
+
+			// This is a special case where we need to modify a offset calculated on start, since the following happened:
+			// 1. The position of the helper is absolute, so it's position is calculated based on the next positioned parent
+			// 2. The actual offset parent is a child of the scroll parent, and the scroll parent isn't the document, which means that
+			//    the scroll is included in the initial calculation of the offset of the parent, and never recalculated upon drag
+			if (this.cssPosition === "absolute" && this.scrollParent[0] !== document && $.contains(this.scrollParent[0], this.offsetParent[0])) {
+				po.left += this.scrollParent.scrollLeft();
+				po.top += this.scrollParent.scrollTop();
 			}
 
-			if(!inst.snapElements[i].snapping && (ts || bs || ls || rs || first)) {
-				(inst.options.snap.snap && inst.options.snap.snap.call(inst.element, event, $.extend(inst._uiHash(), { snapItem: inst.snapElements[i].item })));
+			//This needs to be actually done for all browsers, since pageX/pageY includes this information
+			//Ugly IE fix
+			if ((this.offsetParent[0] === document.body) ||
+				(this.offsetParent[0].tagName && this.offsetParent[0].tagName.toLowerCase() === "html" && $.ui.ie)) {
+				po = { top: 0, left: 0 };
 			}
-			inst.snapElements[i].snapping = (ts || bs || ls || rs || first);
 
-		}
+			return {
+				top: po.top + (parseInt(this.offsetParent.css("borderTopWidth"),10) || 0),
+				left: po.left + (parseInt(this.offsetParent.css("borderLeftWidth"),10) || 0)
+			};
+		},
+
+		_getRelativeOffset: function() {
+			if (this.cssPosition === "relative") {
+				var p = this.element.position();
+				return {
+					top: p.top - (parseInt(this.dragEl.css("top"),10) || 0) + this.scrollParent.scrollTop(),
+					left: p.left - (parseInt(this.dragEl.css("left"),10) || 0) + this.scrollParent.scrollLeft()
+				};
+			}
 
-	}
-});
+			return { top: 0, left: 0 };
+		}
+	});
 
-$.ui.plugin.add("draggable", "stack", {
-	start: function( event, ui, instance ) {
-		var min,
-			o = instance.options,
-			group = $.makeArray($(o.stack)).sort(function(a,b) {
-				return (parseInt($(a).css("zIndex"),10) || 0) - (parseInt($(b).css("zIndex"),10) || 0);
-			});
+	// refreshPositions option
+	$.widget( "ui.draggable", $.ui.draggable, {
+		options: {
+			refreshPositions: false
+		},
 
-		if (!group.length) { return; }
+		_create: function() {
+			var drops;
 
-		min = parseInt($(group[0]).css("zIndex"), 10) || 0;
-		$(group).each(function(i) {
-			$(this).css("zIndex", min + i);
-		});
-		this.css("zIndex", (min + group.length));
-	}
-});
+			this._super();
 
-$.ui.plugin.add("draggable", "zIndex", {
-	start: function( event, ui, instance ) {
-		var t = $( ui.helper ),
-			o = instance.options;
+			this._on({
+				dragstart: function() {
+					drops = $( ":data(ui-sortable)" );
+				},
 
-		if(t.css("zIndex")) {
-			o._zIndex = t.css("zIndex");
-		}
-		t.css("zIndex", o.zIndex);
-	},
-	stop: function( event, ui, instance ) {
-		var o = instance.options;
+				drag: function() {
+					if ( this.options.refreshPositions !== true ) {
+						return;
+					}
 
-		if(o._zIndex) {
-			$(ui.helper).css("zIndex", o._zIndex);
+					drops.each(function() {
+						$( this ).sortable( "refreshPositions" );
+					});
+				}
+			});
 		}
-	}
-});
+	});
+}
 
 return $.ui.draggable;
 
diff --git a/ui/droppable.js b/ui/droppable.js
index 826f46e586c..763cdc16f43 100644
--- a/ui/droppable.js
+++ b/ui/droppable.js
@@ -16,7 +16,7 @@
 			"jquery",
 			"./core",
 			"./widget",
-			"./mouse",
+			"./interaction",
 			"./draggable"
 		], factory );
 	} else {
@@ -26,390 +26,319 @@
 	}
 }(function( $ ) {
 
+var guid = 0,
+	droppables = {};
+
+(function() {
+	var orig = $.ui.draggable.prototype._trigger;
+	$.ui.draggable.prototype._trigger = function( type, event, ui ) {
+		var method = "_draggable" + type.substr( 0, 1 ).toUpperCase() + type.substr( 1 ),
+			allowed = orig.apply( this, arguments );
+
+		if ( allowed && $.ui.droppable[ method ] ) {
+			$.ui.droppable[ method ]( event, ui );
+		}
+
+		return allowed;
+	};
+})();
+
 $.widget( "ui.droppable", {
 	version: "@VERSION",
 	widgetEventPrefix: "drop",
+
 	options: {
-		accept: "*",
-		activeClass: false,
-		addClasses: true,
+		accept: null,
 		greedy: false,
-		hoverClass: false,
-		scope: "default",
-		tolerance: "intersect",
-
-		// callbacks
-		activate: null,
-		deactivate: null,
-		drop: null,
-		out: null,
-		over: null
+		tolerance: "intersect"
 	},
-	_create: function() {
 
-		var proportions,
-			o = this.options,
-			accept = o.accept;
+	// over: whether or not a draggable is currently over droppable
+	// proportions: width and height of droppable
 
-		this.isover = false;
-		this.isout = true;
+	_create: function() {
+		this.refresh();
+		this.guid = guid++;
+		droppables[ this.guid ] = this;
+	},
 
-		this.accept = $.isFunction( accept ) ? accept : function( d ) {
-			return d.is( accept );
-		};
+	/** public **/
 
-		this.proportions = function( /* valueToWrite */ ) {
-			if ( arguments.length ) {
-				// Store the droppable's proportions
-				proportions = arguments[ 0 ];
-			} else {
-				// Retrieve or derive the droppable's proportions
-				return proportions ?
-					proportions :
-					proportions = {
-						width: this.element[ 0 ].offsetWidth,
-						height: this.element[ 0 ].offsetHeight
-					};
-			}
+	refresh: function() {
+		this.offset = this.element.offset();
+		this.proportions = {
+			width: this.element.outerWidth(),
+			height: this.element.outerHeight()
 		};
+	},
 
-		this._addToManager( o.scope );
+	/** internal **/
 
-		o.addClasses && this.element.addClass( "ui-droppable" );
+	_start: function( event ) {
 
-	},
+		// If draggable is acceptable to this droppable
+		if ( !this._isAcceptable( event.target ) ) {
+			return false;
+		}
 
-	_addToManager: function( scope ) {
-		// Add the reference and positions to the manager
-		$.ui.ddmanager.droppables[ scope ] = $.ui.ddmanager.droppables[ scope ] || [];
-		$.ui.ddmanager.droppables[ scope ].push( this );
+		this._trigger( "activate", event, this._uiHash() );
 	},
 
-	_splice: function( drop ) {
-		var i = 0;
-		for ( ; i < drop.length; i++ ) {
-			if ( drop[ i ] === this ) {
-				drop.splice( i, 1 );
+	_isAcceptable: function( draggable ) {
+
+		if ( $.isFunction( this.options.accept ) ) {
+			if ( this.options.accept.call( this.element, draggable ) !== true ) {
+				return false;
 			}
+		} else if ( this.options.accept && !$( draggable ).is( this.options.accept ) ) {
+			return false;
 		}
-	},
 
-	_destroy: function() {
-		var drop = $.ui.ddmanager.droppables[ this.options.scope ];
+		return true;
 
-		this._splice( drop );
+	},
 
-		this.element.removeClass( "ui-droppable ui-droppable-disabled" );
+	_drag: function( event, ui ) {
+		var draggableProportions = $.ui.droppable.draggableProportions,
+			edges = {
+				right: this.offset.left + this.proportions.width,
+				bottom: this.offset.top + this.proportions.height,
+				draggableRight: ui.offset.left + draggableProportions.width,
+				draggableBottom: ui.offset.top + draggableProportions.height
+			},
+			over = $.ui.droppable.tolerance[ this.options.tolerance ]
+				.call( this, event, edges, ui );
+
+		// If there is sufficient overlap as deemed by tolerance
+		if ( over ) {
+			this._trigger( "over", event, this._uiHash() );
+			this.over = true;
+		// If there isn't enough overlap and droppable was previously flagged as over
+		} else if ( this.over ) {
+			this.over = false;
+			this._trigger( "out", event, this._uiHash() );
+		}
 	},
 
-	_setOption: function( key, value ) {
+	_stop: function( event ) {
+
+		var greedy_child,
+			self = this;
+
+		if ( this.over ) {
 
-		if ( key === "accept" ) {
-			this.accept = $.isFunction( value ) ? value : function( d ) {
-				return d.is( value );
-			};
-		} else if ( key === "scope" ) {
-			var drop = $.ui.ddmanager.droppables[ this.options.scope ];
+			this.element.find(":data('" + this.widgetFullName + "')").each( function() {
 
-			this._splice( drop );
-			this._addToManager( value );
+				var drop = $(this).data( self.widgetFullName );
+
+				if ( drop.options.greedy === true && drop.over === true ) {
+					greedy_child = true;
+					return false;
+				}
+			});
+
+			if ( !greedy_child ) {
+				this._trigger( "drop", event, this._uiHash() );
+			}
 		}
 
-		this._super( key, value );
+		this._trigger( "deactivate", event, this._uiHash() );
+
+		this.over = false;
 	},
 
-	_activate: function( event ) {
-		var draggable = $.ui.ddmanager.current;
-		if ( this.options.activeClass ) {
-			this.element.addClass( this.options.activeClass );
-		}
-		if ( draggable ){
-			this._trigger( "activate", event, this.ui( draggable ) );
-		}
+	// TODO: fill me out
+	_uiHash: function() {
+		return {};
 	},
 
-	_deactivate: function( event ) {
-		var draggable = $.ui.ddmanager.current;
-		if ( this.options.activeClass ) {
-			this.element.removeClass( this.options.activeClass );
-		}
-		if ( draggable ){
-			this._trigger( "deactivate", event, this.ui( draggable ) );
+	_destroy: function() {
+		delete droppables[ this.guid ];
+	}
+});
+
+$.extend( $.ui.droppable, {
+	// draggableProportions: width and height of currently dragging draggable
+	// active: array of active droppables
+
+	tolerance: {
+		// Half of the draggable overlaps the droppable, horizontally and vertically
+		intersect: function( event, edges, ui ) {
+			var draggableProportions = $.ui.droppable.draggableProportions,
+				xHalf = ui.offset.left + draggableProportions.width / 2,
+				yHalf = ui.offset.top + draggableProportions.height / 2;
+
+			return this.offset.left < xHalf && edges.right > xHalf &&
+				this.offset.top < yHalf && edges.bottom > yHalf;
+		},
+
+		// Draggable overlaps droppable by at least one pixel
+		touch: function( event, edges, ui ) {
+			return this.offset.left < edges.draggableRight &&
+				edges.right > ui.offset.left &&
+				this.offset.top < edges.draggableBottom &&
+				edges.bottom > ui.offset.top;
+		},
+
+		// Pointer overlaps droppable
+		pointer: function( event, edges, ui ) {
+			return ui.pointer.x >= this.offset.left && ui.pointer.x <= edges.right &&
+				ui.pointer.y >= this.offset.top && ui.pointer.y <= edges.bottom;
+		},
+
+		// Draggable should be entirely inside droppable
+		fit: function( event, edges, ui ) {
+			return edges.draggableRight <= edges.right &&
+				ui.offset.left >= this.offset.left &&
+				edges.draggableBottom <= edges.bottom &&
+				ui.offset.top >= this.offset.top;
 		}
 	},
 
-	_over: function( event ) {
+	_draggableStart: function( event, ui ) {
+		var droppable,
+			element = ui.helper || $( event.target );
 
-		var draggable = $.ui.ddmanager.current;
-
-		// Bail if draggable and droppable are same element
-		if ( !draggable || ( draggable.currentItem || draggable.element )[ 0 ] === this.element[ 0 ] ) {
-			return;
-		}
+		this.draggableProportions = {
+			width: element.outerWidth(),
+			height: element.outerHeight()
+		};
 
-		if ( this.accept.call( this.element[ 0 ], ( draggable.currentItem || draggable.element ) ) ) {
-			if ( this.options.hoverClass ) {
-				this.element.addClass( this.options.hoverClass );
+		this.active = [];
+		for ( droppable in droppables ) {
+			if ( droppables[ droppable ]._start( event, ui ) !== false ) {
+				this.active.push( droppables[ droppable ] );
 			}
-			this._trigger( "over", event, this.ui( draggable ) );
 		}
+	},
 
+	_draggableDrag: function( event, ui ) {
+		$.each( this.active, function() {
+			this._drag( event, ui );
+		});
 	},
 
-	_out: function( event ) {
+	_draggableStop: function( event, ui ) {
+		$.each( this.active, function() {
+			this._stop( event, ui );
+		});
+	}
+});
 
-		var draggable = $.ui.ddmanager.current;
+// DEPRECATED
+if ( $.uiBackCompat !== false ) {
 
-		// Bail if draggable and droppable are same element
-		if ( !draggable || ( draggable.currentItem || draggable.element )[ 0 ] === this.element[ 0 ] ) {
-			return;
-		}
+	// accept option
+	$.widget( "ui.droppable", $.ui.droppable, {
 
-		if ( this.accept.call( this.element[ 0 ], ( draggable.currentItem || draggable.element ) ) ) {
-			if ( this.options.hoverClass ) {
-				this.element.removeClass( this.options.hoverClass );
-			}
-			this._trigger( "out", event, this.ui( draggable ) );
+		options: {
+			accept: "*"
 		}
 
-	},
+	});
 
-	_drop: function( event, custom ) {
+	// activeClass option
+	$.widget( "ui.droppable", $.ui.droppable, {
 
-		var draggable = custom || $.ui.ddmanager.current,
-			childrenIntersection = false;
+		options: {
+			activeClass: false
+		},
 
-		// Bail if draggable and droppable are same element
-		if ( !draggable || ( draggable.currentItem || draggable.element )[ 0 ] === this.element[ 0 ] ) {
-			return false;
-		}
+		_create: function() {
 
-		this.element.find( ":data(ui-droppable)" ).not( ".ui-draggable-dragging" ).each(function() {
-			var inst = $( this ).droppable( "instance" );
-			if (
-				inst.options.greedy &&
-				!inst.options.disabled &&
-				inst.options.scope === draggable.options.scope &&
-				inst.accept.call( inst.element[ 0 ], ( draggable.currentItem || draggable.element ) ) &&
-				$.ui.intersect( draggable, $.extend( inst, { offset: inst.element.offset() } ), inst.options.tolerance )
-			) { childrenIntersection = true; return false; }
-		});
-		if ( childrenIntersection ) {
-			return false;
-		}
+			var self = this,
+					added = false;
 
-		if ( this.accept.call( this.element[ 0 ], ( draggable.currentItem || draggable.element ) ) ) {
-			if ( this.options.activeClass ) {
-				this.element.removeClass( this.options.activeClass );
-			}
-			if ( this.options.hoverClass ) {
-				this.element.removeClass( this.options.hoverClass );
-			}
-			this._trigger( "drop", event, this.ui( draggable ) );
-			return this.element;
-		}
+			this._super();
 
-		return false;
+			// On drag, see if a class should be added to droppable
+			$(this.document[0].body).on( "drag", ".ui-draggable", function( event ) {
 
-	},
+				if ( !added && self.options.activeClass && self._isAcceptable( event.target ) )  {
 
-	ui: function( c ) {
-		return {
-			draggable: ( c.currentItem || c.element ),
-			helper: c.helper,
-			position: c.position,
-			offset: c.positionAbs
-		};
-	}
+					self.element.addClass( self.options.activeClass );
+					added = true;
 
-});
+				}
 
-$.ui.intersect = (function() {
-	function isOverAxis( x, reference, size ) {
-		return ( x >= reference ) && ( x < ( reference + size ) );
-	}
+			});
 
-	return function( draggable, droppable, toleranceMode ) {
+			// On dragstop, remove class if one was added
+			$(this.document[0].body).on( "dragstop", ".ui-draggable", function() {
 
-		if ( !droppable.offset ) {
-			return false;
-		}
+				if ( added ) {
+					self.element.removeClass( self.options.activeClass );
+					added = false;
+				}
+
+			});
 
-		var draggableLeft, draggableTop,
-			x1 = ( draggable.positionAbs || draggable.position.absolute ).left,
-			y1 = ( draggable.positionAbs || draggable.position.absolute ).top,
-			x2 = x1 + draggable.helperProportions.width,
-			y2 = y1 + draggable.helperProportions.height,
-			l = droppable.offset.left,
-			t = droppable.offset.top,
-			r = l + droppable.proportions().width,
-			b = t + droppable.proportions().height;
-
-		switch ( toleranceMode ) {
-		case "fit":
-			return ( l <= x1 && x2 <= r && t <= y1 && y2 <= b );
-		case "intersect":
-			return ( l < x1 + ( draggable.helperProportions.width / 2 ) && // Right Half
-				x2 - ( draggable.helperProportions.width / 2 ) < r && // Left Half
-				t < y1 + ( draggable.helperProportions.height / 2 ) && // Bottom Half
-				y2 - ( draggable.helperProportions.height / 2 ) < b ); // Top Half
-		case "pointer":
-			draggableLeft = ( ( draggable.positionAbs || draggable.position.absolute ).left + ( draggable.clickOffset || draggable.offset.click ).left );
-			draggableTop = ( ( draggable.positionAbs || draggable.position.absolute ).top + ( draggable.clickOffset || draggable.offset.click ).top );
-			return isOverAxis( draggableTop, t, droppable.proportions().height ) && isOverAxis( draggableLeft, l, droppable.proportions().width );
-		case "touch":
-			return (
-				( y1 >= t && y1 <= b ) || // Top edge touching
-				( y2 >= t && y2 <= b ) || // Bottom edge touching
-				( y1 < t && y2 > b ) // Surrounded vertically
-			) && (
-				( x1 >= l && x1 <= r ) || // Left edge touching
-				( x2 >= l && x2 <= r ) || // Right edge touching
-				( x1 < l && x2 > r ) // Surrounded horizontally
-			);
-		default:
-			return false;
 		}
-	};
-})();
 
-/*
-	This manager tracks offsets of draggables and droppables
-*/
-$.ui.ddmanager = {
-	current: null,
-	droppables: { "default": [] },
-	prepareOffsets: function( t, event ) {
+	});
 
-		var i, j,
-			m = $.ui.ddmanager.droppables[ t.options.scope ] || [],
-			type = event ? event.type : null, // workaround for #2317
-			list = ( t.currentItem || t.element ).find( ":data(ui-droppable)" ).addBack();
+	// hoverClass option
+	$.widget( "ui.droppable", $.ui.droppable, {
 
-		droppablesLoop: for ( i = 0; i < m.length; i++ ) {
+		options: {
+			hoverClass: false
+		},
 
-			// No disabled and non-accepted
-			if ( m[ i ].options.disabled || ( t && !m[ i ].accept.call( m[ i ].element[ 0 ], ( t.currentItem || t.element ) ) ) ) {
-				continue;
-			}
+		_create: function() {
 
-			// Filter out elements in the current dragged item
-			for ( j = 0; j < list.length; j++ ) {
-				if ( list[ j ] === m[ i ].element[ 0 ] ) {
-					m[ i ].proportions().height = 0;
-					continue droppablesLoop;
-				}
-			}
+			var self = this,
+					added = false;
 
-			m[ i ].visible = m[ i ].element.css( "display" ) !== "none";
-			if ( !m[ i ].visible ) {
-				continue;
-			}
+			this._super();
 
-			// Activate the droppable if used directly from draggables
-			if ( type === "mousedown" ) {
-				m[ i ]._activate.call( m[ i ], event );
-			}
+			// On over, add class if needed
+			$(this.element).on( "dropover", function() {
 
-			m[ i ].offset = m[ i ].element.offset();
-			m[ i ].proportions({ width: m[ i ].element[ 0 ].offsetWidth, height: m[ i ].element[ 0 ].offsetHeight });
+				if ( !added && self.options.hoverClass )  {
 
-		}
-
-	},
-	drop: function( draggable, event ) {
+					self.element.addClass( self.options.hoverClass );
+					added = true;
 
-		var dropped = false;
-		// Create a copy of the droppables in case the list changes during the drop (#9116)
-		$.each( ( $.ui.ddmanager.droppables[ draggable.options.scope ] || [] ).slice(), function() {
+				}
 
-			if ( !this.options ) {
-				return;
-			}
-			if ( !this.options.disabled && this.visible && $.ui.intersect( draggable, this, this.options.tolerance ) ) {
-				dropped = this._drop.call( this, event ) || dropped;
-			}
+			});
 
-			if ( !this.options.disabled && this.visible && this.accept.call( this.element[ 0 ], ( draggable.currentItem || draggable.element ) ) ) {
-				this.isout = true;
-				this.isover = false;
-				this._deactivate.call( this, event );
-			}
+			// On out, remove class if one was added
+			$(this.element).on( "dropout", function() {
 
-		});
-		return dropped;
+				if ( added ) {
+					self.element.removeClass( self.options.hoverClass );
+					added = false;
+				}
 
-	},
-	dragStart: function( draggable, event ) {
-		// Listen for scrolling so that if the dragging causes scrolling the position of the droppables can be recalculated (see #5003)
-		draggable.element.parentsUntil( "body" ).bind( "scroll.droppable", function() {
-			if ( !draggable.options.refreshPositions ) {
-				$.ui.ddmanager.prepareOffsets( draggable, event );
-			}
-		});
-	},
-	drag: function( draggable, event ) {
+			});
 
-		// If you have a highly dynamic page, you might try this option. It renders positions every time you move the mouse.
-		if ( draggable.options.refreshPositions ) {
-			$.ui.ddmanager.prepareOffsets( draggable, event );
 		}
 
-		// Run through all droppables and check their positions based on specific tolerance options
-		$.each( $.ui.ddmanager.droppables[ draggable.options.scope ] || [], function() {
+	});
 
-			if ( this.options.disabled || this.greedyChild || !this.visible ) {
-				return;
-			}
+	// scope option
+	$.widget( "ui.droppable", $.ui.droppable, {
 
-			var parentInstance, scope, parent,
-				intersects = $.ui.intersect( draggable, this, this.options.tolerance ),
-				c = !intersects && this.isover ? "isout" : ( intersects && !this.isover ? "isover" : null );
-			if ( !c ) {
-				return;
-			}
+		options: {
+			scope: "default"
+		},
 
-			if ( this.options.greedy ) {
-				// find droppable parents with same scope
-				scope = this.options.scope;
-				parent = this.element.parents( ":data(ui-droppable)" ).filter(function() {
-					return $( this ).droppable( "instance" ).options.scope === scope;
-				});
+		_isAcceptable: function( element ) {
 
-				if ( parent.length ) {
-					parentInstance = $( parent[ 0 ] ).droppable( "instance" );
-					parentInstance.greedyChild = ( c === "isover" );
-				}
-			}
+			var draggable = $(element).data( "ui-draggable" );
 
-			// we just moved into a greedy child
-			if ( parentInstance && c === "isover" ) {
-				parentInstance.isover = false;
-				parentInstance.isout = true;
-				parentInstance._out.call( parentInstance, event );
+			if ( this.options.scope !== "default" && draggable && draggable.options.scope === this.options.scope ) {
+				return true;
 			}
 
-			this[ c ] = true;
-			this[c === "isout" ? "isover" : "isout"] = false;
-			this[c === "isover" ? "_over" : "_out"].call( this, event );
-
-			// we just moved out of a greedy child
-			if ( parentInstance && c === "isout" ) {
-				parentInstance.isout = false;
-				parentInstance.isover = true;
-				parentInstance._over.call( parentInstance, event );
-			}
-		});
+			return this._super( element );
 
-	},
-	dragStop: function( draggable, event ) {
-		draggable.element.parentsUntil( "body" ).unbind( "scroll.droppable" );
-		// Call prepareOffsets one final time since IE does not fire return scroll events when overflow was caused by drag (see #5003)
-		if ( !draggable.options.refreshPositions ) {
-			$.ui.ddmanager.prepareOffsets( draggable, event );
 		}
-	}
-};
+
+	});
+
+}
 
 return $.ui.droppable;
 
diff --git a/ui/interaction.js b/ui/interaction.js
new file mode 100644
index 00000000000..816919ac646
--- /dev/null
+++ b/ui/interaction.js
@@ -0,0 +1,316 @@
+/*
+ * jQuery UI Interaction @VERSION
+ *
+ * Copyright 2011, AUTHORS.txt (http://jqueryui.com/about)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * http://jquery.org/license
+ *
+ * http://api.jqueryui.com/interaction/
+ */
+(function( factory ) {
+	if ( typeof define === "function" && define.amd ) {
+
+		// AMD. Register as an anonymous module.
+		define([
+			"./widget"
+		], factory );
+	} else {
+
+		// Browser globals
+		factory( jQuery );
+	}
+}(function( $ ) {
+
+var interaction, touchHook, pointerHook;
+
+$.widget( "ui.interaction", {
+	version: "@VERSION",
+	_create: function() {
+		// force the context so we can pass these methods to the hooks
+		this._interactionMove = $.proxy( this, "_interactionMove" );
+		this._interactionStop = $.proxy( this, "_interactionStop" );
+
+		// initialize all hooks for this widget
+		for ( var hook in interaction.hooks ) {
+			interaction.hooks[ hook ].setup( this, this._startProxy( hook ) );
+		}
+	},
+
+	/** abstract methods **/
+
+	// _start: function( event, pointerPosition )
+	// _move: function( event, pointerPosition )
+	// _stop: function( event, pointerPosition )
+
+	/** protected **/
+
+	_isValidTarget: function() {
+		return true;
+	},
+
+	/** internal **/
+
+	// a pass through to _interactionStart() which tracks the hook that was used
+	_startProxy: function( hook ) {
+		var that = this;
+		return function( event, target, pointerPosition ) {
+			return that._interactionStart( event, target, pointerPosition, hook );
+		};
+	},
+
+	_interactionStart: function( event, target, pointerPosition, hook ) {
+		var started;
+
+		// only one interaction can happen at a time
+		if ( interaction.started ) {
+			return false;
+		}
+
+		// check if the event occurred on a valid target
+		if ( false === this._isValidTarget( $( target ) ) ) {
+			return false;
+		}
+
+		// check if the widget wants the event to start an interaction
+		started = ( this._start( event, pointerPosition ) !== false );
+		if ( started ) {
+			interaction.started = true;
+			interaction.hooks[ hook ].handle( this,
+				this._interactionMove, this._interactionStop );
+		}
+
+		// let the hook know if the interaction was started
+		return started;
+	},
+
+	_interactionMove: function( event, pointerPosition ) {
+		this._move( event, pointerPosition );
+	},
+
+	_interactionStop: function( event, pointerPosition ) {
+		this._stop( event, pointerPosition );
+		interaction.started = false;
+	}
+});
+
+interaction = $.ui.interaction;
+$.extend( interaction, {
+	started: false,
+	hooks: {}
+});
+
+interaction.hooks.mouse = {
+	setup: function( widget, start ) {
+		widget._on( widget.widget(), {
+			"mousedown": function( event ) {
+				// only react to the primary button
+				if ( event.which === 1 ) {
+					var started = start( event, event.target, {
+						x: event.pageX,
+						y: event.pageY
+					});
+
+					if ( started ) {
+						// prevent selection
+						event.preventDefault();
+					}
+				}
+			}
+		});
+	},
+
+	handle: function( widget, move, stop ) {
+		function mousemove( event ) {
+			event.preventDefault();
+			move( event, {
+				x: event.pageX,
+				y: event.pageY
+			});
+		}
+
+		function mouseup( event ) {
+			stop( event, {
+				x: event.pageX,
+				y: event.pageY
+			});
+			widget.document
+				.unbind( "mousemove", mousemove )
+				.unbind( "mouseup", mouseup );
+		}
+
+		widget._on( widget.document, {
+			"mousemove": mousemove,
+			"mouseup": mouseup
+		});
+	}
+};
+
+// WebKit doesn't support TouchList.identifiedTouch()
+function getTouch( event ) {
+	var touches = event.originalEvent.changedTouches,
+		i = 0, length = touches.length;
+
+	for ( ; i < length; i++ ) {
+		if ( touches[ i ].identifier === touchHook.id ) {
+			return touches[ i ];
+		}
+	}
+}
+
+touchHook = interaction.hooks.touch = {
+	setup: function( widget, start ) {
+		widget._on( widget.widget(), {
+			"touchstart": function( event ) {
+				var touch, started;
+
+				if ( touchHook.id ) {
+					return;
+				}
+
+				touch = event.originalEvent.changedTouches.item( 0 );
+				started = start( event, touch.target, {
+					x: touch.pageX,
+					y: touch.pageY
+				});
+
+				if ( started ) {
+					// track which finger is performing the interaction
+					touchHook.id = touch.identifier;
+					// prevent panning/zooming
+					event.preventDefault();
+				}
+			}
+		});
+	},
+
+	handle: function( widget, move, stop ) {
+		function moveHandler( event ) {
+			// TODO: test non-Apple WebKits to see if they allow
+			// zooming/scrolling if we don't preventDefault()
+			var touch = getTouch( event );
+			if ( !touch ) {
+				return;
+			}
+
+			event.preventDefault();
+			move( event, {
+				x: touch.pageX,
+				y: touch.pageY
+			});
+		}
+
+		function stopHandler( event ) {
+			var touch = getTouch( event );
+			if ( !touch ) {
+				return;
+			}
+
+			stop( event, {
+				x: touch.pageX,
+				y: touch.pageY
+			});
+			touchHook.id = null;
+			widget.document
+				.unbind( "touchmove", moveHandler )
+				.unbind( "touchend", stopHandler );
+		}
+
+		widget._on( widget.document, {
+			"touchmove": moveHandler,
+			"touchend": stopHandler
+		});
+	}
+};
+
+pointerHook = interaction.hooks.msPointer = {
+	setup: function( widget, start ) {
+		widget._on( widget.widget(), {
+			"MSPointerDown": function( _event ) {
+				var started,
+					event = _event.originalEvent;
+
+				if ( pointerHook.id ) {
+					return;
+				}
+
+				// TODO: how can we detect a "right click" with a pen?
+				// TODO: get full details about which and button from MS
+				// touch and pen = 1
+				// primary mouse button = 2
+				if ( event.which > 2 ) {
+					return;
+				}
+
+				started = start( event, event.target, {
+					x: event.pageX,
+					y: event.pageY
+				});
+
+				if ( started ) {
+					// track which pointer is performing the interaction
+					pointerHook.id = event.pointerId;
+					// prevent panning/zooming
+					event.preventManipulation();
+					// prevent promoting pointer events to mouse events
+					event.preventMouseEvent();
+				}
+			}
+		});
+	},
+
+	handle: function( widget, move, stop ) {
+		function moveHandler( _event ) {
+			var event = _event.originalEvent,
+				pageX = event.pageX,
+				pageY = event.pageY;
+
+			// always prevent manipulation to avoid panning/zooming
+			event.preventManipulation();
+
+			if ( event.pointerId !== pointerHook.id ) {
+				return;
+			}
+
+			// MS streams events constantly, even if there is no movement
+			// so we optimize by ignoring repeat events
+			if ( pointerHook.x === pageX && pointerHook.y === pageY ) {
+				return;
+			}
+
+			pointerHook.x = pageX;
+			pointerHook.y = pageY;
+			move( event, {
+				x: pageX,
+				y: pageY
+			});
+		}
+
+		function stopHandler( _event ) {
+			var event = _event.originalEvent;
+
+			if ( event.pointerId !== pointerHook.id ) {
+				return;
+			}
+
+			stop( event, {
+				x: event.pageX,
+				y: event.pageY
+			});
+			pointerHook.id = pointerHook.x = pointerHook.y = undefined;
+			widget.document
+				.unbind( "MSPointerMove", moveHandler )
+				.unbind( "MSPointerUp", stopHandler )
+				.unbind( "MSPointerCancel", stopHandler );
+		}
+
+		widget._on( widget.document, {
+			"MSPointerMove": moveHandler,
+			"MSPointerUp": stopHandler,
+			"MSPointerCancel": stopHandler
+		});
+	}
+};
+
+return interaction;
+
+}));
diff --git a/ui/sortable.js b/ui/sortable.js
index a518e75cf44..d1e021737bc 100644
--- a/ui/sortable.js
+++ b/ui/sortable.js
@@ -8,6 +8,7 @@
  *
  * http://api.jqueryui.com/sortable/
  */
+
 (function( factory ) {
 	if ( typeof define === "function" && define.amd ) {
 
@@ -15,8 +16,8 @@
 		define([
 			"jquery",
 			"./core",
-			"./mouse",
-			"./widget"
+			"./widget",
+			"./interaction"
 		], factory );
 	} else {
 
@@ -25,1286 +26,450 @@
 	}
 }(function( $ ) {
 
-return $.widget("ui.sortable", $.ui.mouse, {
+// create a shallow copy of an object
+function copy( obj ) {
+	var prop,
+		ret = {};
+	for ( prop in obj ) {
+		ret[ prop ] = obj[ prop ];
+	}
+	return ret;
+}
+
+$.widget( "ui.sortable", $.ui.interaction, {
 	version: "@VERSION",
 	widgetEventPrefix: "sort",
-	ready: false,
-	options: {
-		appendTo: "parent",
-		axis: false,
-		connectWith: false,
-		containment: false,
-		cursor: "auto",
-		cursorAt: false,
-		dropOnEmpty: true,
-		forcePlaceholderSize: false,
-		forceHelperSize: false,
-		grid: false,
-		handle: false,
-		helper: "original",
-		items: "> *",
-		opacity: false,
-		placeholder: false,
-		revert: false,
-		scroll: true,
-		scrollSensitivity: 20,
-		scrollSpeed: 20,
-		scope: "default",
-		tolerance: "intersect",
-		zIndex: 1000,
-
-		// callbacks
-		activate: null,
-		beforeStop: null,
-		change: null,
-		deactivate: null,
-		out: null,
-		over: null,
-		receive: null,
-		remove: null,
-		sort: null,
-		start: null,
-		stop: null,
-		update: null
-	},
-
-	_isOverAxis: function( x, reference, size ) {
-		return ( x >= reference ) && ( x < ( reference + size ) );
-	},
+	items: "li", // TODO: move to options when API is ready
+
+	// dragEl: element being dragged (original or helper)
+	// position: final CSS position of dragEl
+	// offset: offset of dragEl
+	// originalPosition: CSS position before drag start
+	// originalOffset: offset before drag start
+	// originalPointer: pageX/Y at drag start (offset of pointer)
+	// startPosition: CSS position at drag start (after beforeStart)
+	// startOffset: offset at drag start (after beforeStart)
+	// tempPosition: overridable CSS position of dragEl
+	// overflowOffset: offset of scroll parent
+	// overflow: object containing width and height keys of scroll parent
+	// sortablePositions: cache of positions of all sortable items
+	// originalCssPosition: CSS position of element before being made absolute on start
+	// placeholder: reference to jquery object of cloned element that is being dragged
 
-	_isFloating: function( item ) {
-		return (/left|right/).test(item.css("float")) || (/inline|table-cell/).test(item.css("display"));
+	options: {
 	},
 
 	_create: function() {
 
-		var o = this.options;
-		this.containerCache = {};
-		this.element.addClass("ui-sortable");
-
-		//Get the items
-		this.refresh();
-
-		//Let's determine if the items are being displayed horizontally
-		this.floating = this.items.length ? o.axis === "x" || this._isFloating(this.items[0].item) : false;
-
-		//Let's determine the parent's offset
-		this.offset = this.element.offset();
-
-		//Initialize mouse events for interaction
-		this._mouseInit();
+		this._super();
 
-		this._setHandleClassName();
+		this.element.addClass( "ui-sortable" );
 
-		//We're ready to go
-		this.ready = true;
+		this._setSortablePositions();
 
 	},
 
-	_setOption: function( key, value ) {
-		this._super( key, value );
+	_setSortablePositions: function() {
 
-		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" )
-			.find( ".ui-sortable-handle" )
-				.removeClass( "ui-sortable-handle" );
-		this._mouseDestroy();
-
-		for ( var i = this.items.length - 1; i >= 0; i-- ) {
-			this.items[i].item.removeData(this.widgetName + "-item");
-		}
-
-		return this;
-	},
+		var sortablePositions = this.sortablePositions = [];
 
-	_mouseCapture: function(event, overrideHandle) {
-		var currentItem = null,
-			validHandle = false,
-			that = this;
+		this.element.find( this.items ).each( function() {
 
-		if (this.reverting) {
-			return false;
-		}
+			var el = $(this);
 
-		if(this.options.disabled || this.options.type === "static") {
-			return false;
-		}
-
-		//We have to refresh the items data once first
-		this._refreshItems(event);
-
-		//Find out if the clicked node (or one of its parents) is a actual item in this.items
-		$(event.target).parents().each(function() {
-			if($.data(this, that.widgetName + "-item") === that) {
-				currentItem = $(this);
-				return false;
-			}
+			sortablePositions.push([{
+				el: el,
+				offset: el.offset()
+			}]);
 		});
-		if($.data(event.target, that.widgetName + "-item") === that) {
-			currentItem = $(event.target);
-		}
-
-		if(!currentItem) {
-			return false;
-		}
-		if(this.options.handle && !overrideHandle) {
-			$(this.options.handle, currentItem).find("*").addBack().each(function() {
-				if(this === event.target) {
-					validHandle = true;
-				}
-			});
-			if(!validHandle) {
-				return false;
-			}
-		}
-
-		this.currentItem = currentItem;
-		this._removeCurrentsFromItems();
-		return true;
-
-	},
-
-	_mouseStart: function(event, overrideHandle, noActivation) {
-
-		var i, body,
-			o = this.options;
-
-		this.currentContainer = this;
-
-		//We only need to call refreshPositions, because the refreshItems call has been moved to mouseCapture
-		this.refreshPositions();
-
-		//Create and append the visible helper
-		this.helper = this._createHelper(event);
-
-		//Cache the helper size
-		this._cacheHelperProportions();
-
-		/*
-		 * - Position generation -
-		 * This block generates everything position related - it's the core of draggables.
-		 */
-
-		//Cache the margins of the original element
-		this._cacheMargins();
-
-		//Get the next scrolling parent
-		this.scrollParent = this.helper.scrollParent();
-
-		//The element's absolute position on the page minus margins
-		this.offset = this.currentItem.offset();
-		this.offset = {
-			top: this.offset.top - this.margins.top,
-			left: this.offset.left - this.margins.left
-		};
-
-		$.extend(this.offset, {
-			click: { //Where the click happened, relative to the element
-				left: event.pageX - this.offset.left,
-				top: event.pageY - this.offset.top
-			},
-			parent: this._getParentOffset(),
-			relative: this._getRelativeOffset() //This is a relative to absolute position minus the actual position calculation - only used for relative positioned helper
-		});
-
-		// Only after we got the offset, we can change the helper's position to absolute
-		// TODO: Still need to figure out a way to make relative sorting possible
-		this.helper.css("position", "absolute");
-		this.cssPosition = this.helper.css("position");
-
-		//Generate the original position
-		this.originalPosition = this._generatePosition(event);
-		this.originalPageX = event.pageX;
-		this.originalPageY = event.pageY;
-
-		//Adjust the mouse offset relative to the helper if "cursorAt" is supplied
-		(o.cursorAt && this._adjustOffsetFromHelper(o.cursorAt));
-
-		//Cache the former DOM position
-		this.domPosition = { prev: this.currentItem.prev()[0], parent: this.currentItem.parent()[0] };
-
-		//If the helper is not the original, hide the original so it's not playing any role during the drag, won't cause anything bad this way
-		if(this.helper[0] !== this.currentItem[0]) {
-			this.currentItem.hide();
-		}
-
-		//Create the placeholder
-		this._createPlaceholder();
-
-		//Set a containment if given in the options
-		if(o.containment) {
-			this._setContainment();
-		}
-
-		if( o.cursor && o.cursor !== "auto" ) { // cursor option
-			body = this.document.find( "body" );
-
-			// support: IE
-			this.storedCursor = body.css( "cursor" );
-			body.css( "cursor", o.cursor );
-
-			this.storedStylesheet = $( "<style>*{ cursor: "+o.cursor+" !important; }</style>" ).appendTo( body );
-		}
-
-		if(o.opacity) { // opacity option
-			if (this.helper.css("opacity")) {
-				this._storedOpacity = this.helper.css("opacity");
-			}
-			this.helper.css("opacity", o.opacity);
-		}
-
-		if(o.zIndex) { // zIndex option
-			if (this.helper.css("zIndex")) {
-				this._storedZIndex = this.helper.css("zIndex");
-			}
-			this.helper.css("zIndex", o.zIndex);
-		}
-
-		//Prepare scrolling
-		if(this.scrollParent[0] !== document && this.scrollParent[0].tagName !== "HTML") {
-			this.overflowOffset = this.scrollParent.offset();
-		}
-
-		//Call callbacks
-		this._trigger("start", event, this._uiHash());
-
-		//Recache the helper size
-		if(!this._preserveHelperProportions) {
-			this._cacheHelperProportions();
-		}
-
-
-		//Post "activate" events to possible containers
-		if( !noActivation ) {
-			for ( i = this.containers.length - 1; i >= 0; i-- ) {
-				this.containers[ i ]._trigger( "activate", event, this._uiHash( this ) );
-			}
-		}
-
-		//Prepare possible droppables
-		if($.ui.ddmanager) {
-			$.ui.ddmanager.current = this;
-		}
-
-		if ($.ui.ddmanager && !o.dropBehaviour) {
-			$.ui.ddmanager.prepareOffsets(this, event);
-		}
-
-		this.dragging = true;
-
-		this.helper.addClass("ui-sortable-helper");
-		this._mouseDrag(event); //Execute the drag once - this causes the helper not to be visible before getting its correct position
-		return true;
-
-	},
-
-	_mouseDrag: function(event) {
-		var i, item, itemElement, intersection,
-			o = this.options,
-			scrolled = false;
-
-		//Compute the helpers position
-		this.position = this._generatePosition(event);
-		this.positionAbs = this._convertPositionTo("absolute");
-
-		if (!this.lastPositionAbs) {
-			this.lastPositionAbs = this.positionAbs;
-		}
-
-		//Do scrolling
-		if(this.options.scroll) {
-			if(this.scrollParent[0] !== document && this.scrollParent[0].tagName !== "HTML") {
-
-				if((this.overflowOffset.top + this.scrollParent[0].offsetHeight) - event.pageY < o.scrollSensitivity) {
-					this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop + o.scrollSpeed;
-				} else if(event.pageY - this.overflowOffset.top < o.scrollSensitivity) {
-					this.scrollParent[0].scrollTop = scrolled = this.scrollParent[0].scrollTop - o.scrollSpeed;
-				}
-
-				if((this.overflowOffset.left + this.scrollParent[0].offsetWidth) - event.pageX < o.scrollSensitivity) {
-					this.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft + o.scrollSpeed;
-				} else if(event.pageX - this.overflowOffset.left < o.scrollSensitivity) {
-					this.scrollParent[0].scrollLeft = scrolled = this.scrollParent[0].scrollLeft - o.scrollSpeed;
-				}
-
-			} else {
-
-				if(event.pageY - $(document).scrollTop() < o.scrollSensitivity) {
-					scrolled = $(document).scrollTop($(document).scrollTop() - o.scrollSpeed);
-				} else if($(window).height() - (event.pageY - $(document).scrollTop()) < o.scrollSensitivity) {
-					scrolled = $(document).scrollTop($(document).scrollTop() + o.scrollSpeed);
-				}
-
-				if(event.pageX - $(document).scrollLeft() < o.scrollSensitivity) {
-					scrolled = $(document).scrollLeft($(document).scrollLeft() - o.scrollSpeed);
-				} else if($(window).width() - (event.pageX - $(document).scrollLeft()) < o.scrollSensitivity) {
-					scrolled = $(document).scrollLeft($(document).scrollLeft() + o.scrollSpeed);
-				}
-
-			}
-
-			if(scrolled !== false && $.ui.ddmanager && !o.dropBehaviour) {
-				$.ui.ddmanager.prepareOffsets(this, event);
-			}
-		}
-
-		//Regenerate the absolute position used for position checks
-		this.positionAbs = this._convertPositionTo("absolute");
-
-		//Set the helper position
-		if(!this.options.axis || this.options.axis !== "y") {
-			this.helper[0].style.left = this.position.left+"px";
-		}
-		if(!this.options.axis || this.options.axis !== "x") {
-			this.helper[0].style.top = this.position.top+"px";
-		}
-
-		//Rearrange
-		for (i = this.items.length - 1; i >= 0; i--) {
-
-			//Cache variables and intersection, continue if no intersection
-			item = this.items[i];
-			itemElement = item.item[0];
-			intersection = this._intersectsWithPointer(item);
-			if (!intersection) {
-				continue;
-			}
-
-			// Only put the placeholder inside the current Container, skip all
-			// items from other containers. This works because when moving
-			// an item from one container to another the
-			// currentContainer is switched before the placeholder is moved.
-			//
-			// Without this, moving items in "sub-sortables" can cause
-			// the placeholder to jitter beetween the outer and inner container.
-			if (item.instance !== this.currentContainer) {
-				continue;
-			}
-
-			// cannot intersect with itself
-			// no useless actions that have been done before
-			// no action if the item moved is the parent of the item checked
-			if (itemElement !== this.currentItem[0] &&
-				this.placeholder[intersection === 1 ? "next" : "prev"]()[0] !== itemElement &&
-				!$.contains(this.placeholder[0], itemElement) &&
-				(this.options.type === "semi-dynamic" ? !$.contains(this.element[0], itemElement) : true)
-			) {
-
-				this.direction = intersection === 1 ? "down" : "up";
-
-				if (this.options.tolerance === "pointer" || this._intersectsWithSides(item)) {
-					this._rearrange(event, item);
-				} else {
-					break;
-				}
-
-				this._trigger("change", event, this._uiHash());
-				break;
-			}
-		}
-
-		//Post events to containers
-		this._contactContainers(event);
-
-		//Interconnect with droppables
-		if($.ui.ddmanager) {
-			$.ui.ddmanager.drag(this, event);
-		}
-
-		//Call callbacks
-		this._trigger("sort", event, this._uiHash());
-
-		this.lastPositionAbs = this.positionAbs;
-		return false;
 
 	},
 
-	_mouseStop: function(event, noPropagation) {
+	/** interaction interface **/
 
-		if(!event) {
-			return;
-		}
-
-		//If we are using droppables, inform the manager about the drop
-		if ($.ui.ddmanager && !this.options.dropBehaviour) {
-			$.ui.ddmanager.drop(this, event);
-		}
-
-		if(this.options.revert) {
-			var that = this,
-				cur = this.placeholder.offset(),
-				axis = this.options.axis,
-				animation = {};
-
-			if ( !axis || axis === "x" ) {
-				animation.left = cur.left - this.offset.parent.left - this.margins.left + (this.offsetParent[0] === document.body ? 0 : this.offsetParent[0].scrollLeft);
-			}
-			if ( !axis || axis === "y" ) {
-				animation.top = cur.top - this.offset.parent.top - this.margins.top + (this.offsetParent[0] === document.body ? 0 : this.offsetParent[0].scrollTop);
-			}
-			this.reverting = true;
-			$(this.helper).animate( animation, parseInt(this.options.revert, 10) || 500, function() {
-				that._clear(event);
-			});
-		} else {
-			this._clear(event, noPropagation);
-		}
-
-		return false;
+	_isValidTarget: function( element ) {
 
+		// TODO: options for what is actually valid
+		return element.is( this.items );
 	},
 
-	cancel: function() {
+	_start: function( event, pointerPosition ) {
 
-		if(this.dragging) {
+		// The actual dragging element, should always be a jQuery object
+		// this.dragEl = this.options.helper ?
+			// this._createHelper( pointerPosition ) :
+			// this.element;
 
-			this._mouseUp({ target: null });
-
-			if(this.options.helper === "original") {
-				this.currentItem.css(this._storedCSS).removeClass("ui-sortable-helper");
-			} else {
-				this.currentItem.show();
-			}
+		this.dragEl = $(event.target);
 
-			//Post deactivating events to containers
-			for (var i = this.containers.length - 1; i >= 0; i--){
-				this.containers[i]._trigger("deactivate", null, this._uiHash(this));
-				if(this.containers[i].containerCache.over) {
-					this.containers[i]._trigger("out", null, this._uiHash(this));
-					this.containers[i].containerCache.over = 0;
-				}
-			}
-
-		}
-
-		if (this.placeholder) {
-			//$(this.placeholder[0]).remove(); would have been the jQuery way - unfortunately, it unbinds ALL events from the original node!
-			if(this.placeholder[0].parentNode) {
-				this.placeholder[0].parentNode.removeChild(this.placeholder[0]);
-			}
-			if(this.options.helper !== "original" && this.helper && this.helper[0].parentNode) {
-				this.helper.remove();
-			}
-
-			$.extend(this, {
-				helper: null,
-				dragging: false,
-				reverting: false,
-				_noFinalSort: null
-			});
-
-			if(this.domPosition.prev) {
-				$(this.domPosition.prev).after(this.currentItem);
-			} else {
-				$(this.domPosition.parent).prepend(this.currentItem);
-			}
+		// Save original css position if there are currently styles
+		// Otherwise the original css will be set back by removing attribute
+		if ( this.dragEl[0].style.position ) {
+			this.originalCssPosition = this.dragEl[0].style.position;
 		}
 
-		return this;
-
-	},
-
-	serialize: function(o) {
-
-		var items = this._getItemsAsjQuery(o && o.connected),
-			str = [];
-		o = o || {};
-
-		$(items).each(function() {
-			var res = ($(o.item || this).attr(o.attribute || "id") || "").match(o.expression || (/(.+)[\-=_](.+)/));
-			if (res) {
-				str.push((o.key || res[1]+"[]")+"="+(o.key && o.expression ? res[1] : res[2]));
-			}
+		// Create placeholder for while element is dragging
+		// TODO: what do we do about IDs?
+		// TODO: possibly use CSS for visibility portion
+		this.placeholder = this.dragEl.clone().removeAttr("id").css({
+			visibility: "hidden",
+			position: this.originalCssPosition || ""
 		});
 
-		if(!str.length && o.key) {
-			str.push(o.key + "=");
-		}
-
-		return str.join("&");
-
-	},
-
-	toArray: function(o) {
-
-		var items = this._getItemsAsjQuery(o && o.connected),
-			ret = [];
-
-		o = o || {};
-
-		items.each(function() { ret.push($(o.item || this).attr(o.attribute || "id") || ""); });
-		return ret;
-
-	},
-
-	/* Be careful with the following core functions */
-	_intersectsWith: function(item) {
-
-		var x1 = this.positionAbs.left,
-			x2 = x1 + this.helperProportions.width,
-			y1 = this.positionAbs.top,
-			y2 = y1 + this.helperProportions.height,
-			l = item.left,
-			r = l + item.width,
-			t = item.top,
-			b = t + item.height,
-			dyClick = this.offset.click.top,
-			dxClick = this.offset.click.left,
-			isOverElementHeight = ( this.options.axis === "x" ) || ( ( y1 + dyClick ) > t && ( y1 + dyClick ) < b ),
-			isOverElementWidth = ( this.options.axis === "y" ) || ( ( x1 + dxClick ) > l && ( x1 + dxClick ) < r ),
-			isOverElement = isOverElementHeight && isOverElementWidth;
-
-		if ( this.options.tolerance === "pointer" ||
-			this.options.forcePointerForContainers ||
-			(this.options.tolerance !== "pointer" && this.helperProportions[this.floating ? "width" : "height"] > item[this.floating ? "width" : "height"])
-		) {
-			return isOverElement;
-		} else {
-
-			return (l < x1 + (this.helperProportions.width / 2) && // Right Half
-				x2 - (this.helperProportions.width / 2) < r && // Left Half
-				t < y1 + (this.helperProportions.height / 2) && // Bottom Half
-				y2 - (this.helperProportions.height / 2) < b ); // Top Half
-
+		this.dragEl.after( this.placeholder );
+
+		this.dragEl.css( "position", "absolute" );
+
+		// // _createHelper() ensures that helpers are in the correct position
+		// // in the DOM, but we need to handle appendTo when there is no helper
+		// if ( this.options.appendTo && this.dragEl === this.element ) {
+			// this.domPosition = {
+				// parent: this.element.parent(),
+				// index: this.element.index()
+			// };
+			// offset = this.dragEl.offset();
+			// this.dragEl
+				// .appendTo( this.options.appendTo )
+				// .offset( offset );
+		// }
+
+		this.cssPosition = this.dragEl.css( "position" );
+		this.scrollParent = this.element.scrollParent();
+
+		// Cache starting positions
+		this.originalPosition = this.startPosition = this._getPosition();
+		this.originalOffset = this.startOffset = this.dragEl.offset();
+		this.originalPointer = pointerPosition;
+
+		// Cache current position and offset
+		this.position = copy( this.startPosition );
+		this.offset = copy( this.startOffset );
+
+		// Cache the offset of scrollParent, if required for _handleScrolling
+		if ( this.scrollParent[0] !== this.document[0] && this.scrollParent[0].tagName !== "HTML" ) {
+			this.overflowOffset = this.scrollParent.offset();
 		}
-	},
 
-	_intersectsWithPointer: function(item) {
+		this.overflow = {
+			height: this.scrollParent[0] === this.document[0] ?
+				this.window.height() : this.scrollParent.height(),
+			width: this.scrollParent[0] === this.document[0] ?
+				this.window.width() : this.scrollParent.width()
+		};
 
-		var isOverElementHeight = (this.options.axis === "x") || this._isOverAxis(this.positionAbs.top + this.offset.click.top, item.top, item.height),
-			isOverElementWidth = (this.options.axis === "y") || this._isOverAxis(this.positionAbs.left + this.offset.click.left, item.left, item.width),
-			isOverElement = isOverElementHeight && isOverElementWidth,
-			verticalDirection = this._getDragVerticalDirection(),
-			horizontalDirection = this._getDragHorizontalDirection();
+		this._preparePosition( pointerPosition );
 
-		if (!isOverElement) {
+		// If user cancels beforeStart, don't allow dragging
+		if ( this._trigger( "beforeStart", event,
+				this._originalHash( pointerPosition ) ) === false ) {
 			return false;
 		}
 
-		return this.floating ?
-			( ((horizontalDirection && horizontalDirection === "right") || verticalDirection === "down") ? 2 : 1 )
-			: ( verticalDirection && (verticalDirection === "down" ? 2 : 1) );
-
-	},
-
-	_intersectsWithSides: function(item) {
-
-		var isOverBottomHalf = this._isOverAxis(this.positionAbs.top + this.offset.click.top, item.top + (item.height/2), item.height),
-			isOverRightHalf = this._isOverAxis(this.positionAbs.left + this.offset.click.left, item.left + (item.width/2), item.width),
-			verticalDirection = this._getDragVerticalDirection(),
-			horizontalDirection = this._getDragHorizontalDirection();
-
-		if (this.floating && horizontalDirection) {
-			return ((horizontalDirection === "right" && isOverRightHalf) || (horizontalDirection === "left" && !isOverRightHalf));
-		} else {
-			return verticalDirection && ((verticalDirection === "down" && isOverBottomHalf) || (verticalDirection === "up" && !isOverBottomHalf));
-		}
-
-	},
-
-	_getDragVerticalDirection: function() {
-		var delta = this.positionAbs.top - this.lastPositionAbs.top;
-		return delta !== 0 && (delta > 0 ? "down" : "up");
-	},
-
-	_getDragHorizontalDirection: function() {
-		var delta = this.positionAbs.left - this.lastPositionAbs.left;
-		return delta !== 0 && (delta > 0 ? "right" : "left");
-	},
-
-	refresh: function(event) {
-		this._refreshItems(event);
-		this._setHandleClassName();
-		this.refreshPositions();
-		return this;
-	},
+		this._setCss();
+		this.startPosition = this._getPosition();
+		this.startOffset = this.dragEl.offset();
 
-	_connectWith: function() {
-		var options = this.options;
-		return options.connectWith.constructor === String ? [options.connectWith] : options.connectWith;
+		this._trigger( "start", event, this._fullHash( pointerPosition ) );
+		this._blockFrames();
 	},
 
-	_getItemsAsjQuery: function(connected) {
-
-		var i, j, cur, inst,
-			items = [],
-			queries = [],
-			connectWith = this._connectWith();
-
-		if(connectWith && connected) {
-			for (i = connectWith.length - 1; i >= 0; i--){
-				cur = $(connectWith[i]);
-				for ( j = cur.length - 1; j >= 0; j--){
-					inst = $.data(cur[j], this.widgetFullName);
-					if(inst && inst !== this && !inst.options.disabled) {
-						queries.push([$.isFunction(inst.options.items) ? inst.options.items.call(inst.element) : $(inst.options.items, inst.element).not(".ui-sortable-helper").not(".ui-sortable-placeholder"), inst]);
-					}
-				}
-			}
-		}
+	_move: function( event, pointerPosition ) {
 
-		queries.push([$.isFunction(this.options.items) ? this.options.items.call(this.element, null, { options: this.options, item: this.currentItem }) : $(this.options.items, this.element).not(".ui-sortable-helper").not(".ui-sortable-placeholder"), this]);
+		var sort, sortItem, sortIndex,
+			len = this.sortablePositions.length;
 
-		function addItems() {
-			items.push( this );
-		}
-		for (i = queries.length - 1; i >= 0; i--){
-			queries[i][0].each( addItems );
-		}
+		this._preparePosition( pointerPosition );
 
-		return $(items);
+		// // If user cancels drag, don't move the element
+		// if ( this._trigger( "drag", event, this._fullHash( pointerPosition ) ) === false ) {
+			// return;
+		// }
 
-	},
+		this._setCss();
 
-	_removeCurrentsFromItems: function() {
+		// Scroll the scrollParent, if needed
+		this._handleScrolling( pointerPosition );
 
-		var list = this.currentItem.find(":data(" + this.widgetName + "-item)");
+		for ( sortIndex = 0; sortIndex < len; ++sortIndex ) {
+			for ( sort in this.sortablePositions[sortIndex] ) {
+				sortItem = this.sortablePositions[sortIndex][sort];
 
-		this.items = $.grep(this.items, function (item) {
-			for (var j=0; j < list.length; j++) {
-				if(list[j] === item.item[0]) {
-					return false;
+				// Don't bother checking against self
+				if ( sortItem.el[0] === this.dragEl[0] ) {
+					continue;
 				}
-			}
-			return true;
-		});
-
-	},
-
-	_refreshItems: function(event) {
-
-		this.items = [];
-		this.containers = [this];
 
-		var i, j, cur, inst, targetData, _queries, item, queriesLength,
-			items = this.items,
-			queries = [[$.isFunction(this.options.items) ? this.options.items.call(this.element[0], event, { item: this.currentItem }) : $(this.options.items, this.element), this]],
-			connectWith = this._connectWith();
-
-		if(connectWith && this.ready) { //Shouldn't be run the first time through due to massive slow-down
-			for (i = connectWith.length - 1; i >= 0; i--){
-				cur = $(connectWith[i]);
-				for (j = cur.length - 1; j >= 0; j--){
-					inst = $.data(cur[j], this.widgetFullName);
-					if(inst && inst !== this && !inst.options.disabled) {
-						queries.push([$.isFunction(inst.options.items) ? inst.options.items.call(inst.element[0], event, { item: this.currentItem }) : $(inst.options.items, inst.element), inst]);
-						this.containers.push(inst);
+				if ( this._over( sortItem ) )  {
+					// TODO: cache height of element
+					if ( ( this.offset.top + this.dragEl.height() )	> ( sortItem.offset.top + sortItem.el.height() / 2 ) ) {
+						sortItem.el.after( this.dragEl );
+						this.dragEl.after( this.placeholder );
+						this._setSortablePositions();
+					} else if ( this.offset.top	< ( sortItem.offset.top + sortItem.el.height() / 2 ) ) {
+						sortItem.el.before( this.dragEl );
+						this.dragEl.before( this.placeholder );
+						this._setSortablePositions();
 					}
 				}
 			}
 		}
-
-		for (i = queries.length - 1; i >= 0; i--) {
-			targetData = queries[i][1];
-			_queries = queries[i][0];
-
-			for (j=0, queriesLength = _queries.length; j < queriesLength; j++) {
-				item = $(_queries[j]);
-
-				item.data(this.widgetName + "-item", targetData); // Data for target checking (mouse manager)
-
-				items.push({
-					item: item,
-					instance: targetData,
-					width: 0, height: 0,
-					left: 0, top: 0
-				});
-			}
-		}
-
 	},
 
-	refreshPositions: function(fast) {
-
-		//This has to be redone because due to the item being moved out/into the offsetParent, the offsetParent's position will change
-		if(this.offsetParent && this.helper) {
-			this.offset.parent = this._getParentOffset();
-		}
-
-		var i, item, t, p;
-
-		for (i = this.items.length - 1; i >= 0; i--){
-			item = this.items[i];
+	// TODO: swap out for real tolerance options
+	_over: function( sortItem ) {
 
-			//We ignore calculating positions of all connected containers when we're not over them
-			if(item.instance !== this.currentContainer && this.currentContainer && item.item[0] !== this.currentItem[0]) {
-				continue;
-			}
-
-			t = this.options.toleranceElement ? $(this.options.toleranceElement, item.item) : item.item;
-
-			if (!fast) {
-				item.width = t.outerWidth();
-				item.height = t.outerHeight();
-			}
-
-			p = t.offset();
-			item.left = p.left;
-			item.top = p.top;
-		}
+		// TODO: use same cache from _move for height and width of element
+		var edges = {
+			droppableRight: sortItem.offset.left + sortItem.el.width(),
+			droppableBottom: sortItem.offset.top + sortItem.el.height(),
+			draggableRight: this.offset.left + this.dragEl.width(),
+			draggableBottom: this.offset.top + this.dragEl.height()
+		};
 
-		if(this.options.custom && this.options.custom.refreshContainers) {
-			this.options.custom.refreshContainers.call(this);
-		} else {
-			for (i = this.containers.length - 1; i >= 0; i--){
-				p = this.containers[i].element.offset();
-				this.containers[i].containerCache.left = p.left;
-				this.containers[i].containerCache.top = p.top;
-				this.containers[i].containerCache.width = this.containers[i].element.outerWidth();
-				this.containers[i].containerCache.height = this.containers[i].element.outerHeight();
-			}
-		}
+		return sortItem.offset.left < edges.draggableRight &&
+				edges.droppableRight > this.offset.left &&
+				sortItem.offset.top < edges.draggableBottom &&
+				edges.droppableBottom > sortItem.offset.top;
 
-		return this;
 	},
 
-	_createPlaceholder: function(that) {
-		that = that || this;
-		var className,
-			o = that.options;
-
-		if(!o.placeholder || o.placeholder.constructor === String) {
-			className = o.placeholder;
-			o.placeholder = {
-				element: function() {
-
-					var nodeName = that.currentItem[0].nodeName.toLowerCase(),
-						element = $( "<" + nodeName + ">", that.document[0] )
-							.addClass(className || that.currentItem[0].className+" ui-sortable-placeholder")
-							.removeClass("ui-sortable-helper");
-
-					if ( nodeName === "tr" ) {
-						that.currentItem.children().each(function() {
-							$( "<td>&#160;</td>", that.document[0] )
-								.attr( "colspan", $( this ).attr( "colspan" ) || 1 )
-								.appendTo( element );
-						});
-					} else if ( nodeName === "img" ) {
-						element.attr( "src", that.currentItem.attr( "src" ) );
-					}
+	_stop: function( event, pointerPosition ) {
 
-					if ( !className ) {
-						element.css( "visibility", "hidden" );
-					}
+		this._preparePosition( pointerPosition );
 
-					return element;
-				},
-				update: function(container, p) {
+		// // If user cancels stop, leave helper there
+		// if ( this._trigger( "stop", event, this._fullHash( pointerPosition ) ) !== false ) {
+			// if ( this.options.helper ) {
+				// this.dragEl.remove();
+			// }
+			// this._resetDomPosition();
+		// }
 
-					// 1. If a className is set as 'placeholder option, we don't force sizes - the class is responsible for that
-					// 2. The option 'forcePlaceholderSize can be enabled to force it even if a class name is specified
-					if(className && !o.forcePlaceholderSize) {
-						return;
-					}
-
-					//If the element doesn't have a actual height by itself (without styles coming from a stylesheet), it receives the inline height from the dragged item
-					if(!p.height()) { p.height(that.currentItem.innerHeight() - parseInt(that.currentItem.css("paddingTop")||0, 10) - parseInt(that.currentItem.css("paddingBottom")||0, 10)); }
-					if(!p.width()) { p.width(that.currentItem.innerWidth() - parseInt(that.currentItem.css("paddingLeft")||0, 10) - parseInt(that.currentItem.css("paddingRight")||0, 10)); }
-				}
-			};
+		if ( this.originalCssPosition ) {
+			this.dragEl.css( "position", this.originalCssPosition );
+		} else {
+			this.dragEl.css( "position", "" );
 		}
 
-		//Create the placeholder
-		that.placeholder = $(o.placeholder.element.call(that.element, that.currentItem));
+		// TODO: should same thing be done here as is done for position or is there better way altogether
+		this.dragEl.css( "left", "" );
+		this.dragEl.css( "top", "" );
 
-		//Append it after the actual current item
-		that.currentItem.after(that.placeholder);
+		this.placeholder.remove();
 
-		//Update the size of the placeholder (TODO: Logic to fuzzy, see line 316/317)
-		o.placeholder.update(that, that.placeholder);
+		// Unset properties only needed during draggin/sorting
+		this.dragEl = null;
+		this.originalCssPosition = null;
+		this.placeholder = null;
 
+		this._unblockFrames();
 	},
 
-	_contactContainers: function(event) {
-		var i, j, dist, itemWithLeastDistance, posProperty, sizeProperty, cur, nearBottom, floating, axis,
-			innermostContainer = null,
-			innermostIndex = null;
+	// /** internal **/
 
-		// get innermost container that intersects with item
-		for (i = this.containers.length - 1; i >= 0; i--) {
+	// _createHelper: function( pointerPosition ) {
+		// var helper,
+			// offset = this.element.offset(),
+			// xPos = (pointerPosition.x - offset.left) / this.element.outerWidth(),
+			// yPos = (pointerPosition.y - offset.top) / this.element.outerHeight();
 
-			// never consider a container that's located within the item itself
-			if($.contains(this.currentItem[0], this.containers[i].element[0])) {
-				continue;
-			}
+		// // clone
+		// if ( this.options.helper === true ) {
+			// helper = this.element.clone()
+				// .removeAttr( "id" )
+				// .find( "[id]" )
+					// .removeAttr( "id" )
+				// .end();
+		// } else {
+			// // TODO: figure out the signature for this; see #4957
+			// helper = $( this.options.helper() );
+		// }
 
-			if(this._intersectsWith(this.containers[i].containerCache)) {
+		// // Ensure the helper is in the DOM; obey the appendTo option if it exists
+		// if ( this.options.appendTo || !helper.closest( "body" ).length ) {
+			// helper.appendTo( this.options.appendTo || this.document[0].body );
+		// }
 
-				// if we've already found a container and it's more "inner" than this, then continue
-				if(innermostContainer && $.contains(this.containers[i].element[0], innermostContainer.element[0])) {
-					continue;
-				}
-
-				innermostContainer = this.containers[i];
-				innermostIndex = i;
-
-			} else {
-				// container doesn't intersect. trigger "out" event if necessary
-				if(this.containers[i].containerCache.over) {
-					this.containers[i]._trigger("out", event, this._uiHash(this));
-					this.containers[i].containerCache.over = 0;
-				}
-			}
-
-		}
-
-		// if no intersecting containers found, return
-		if(!innermostContainer) {
-			return;
-		}
-
-		// move the item into the container if it's not there already
-		if(this.containers.length === 1) {
-			if (!this.containers[innermostIndex].containerCache.over) {
-				this.containers[innermostIndex]._trigger("over", event, this._uiHash(this));
-				this.containers[innermostIndex].containerCache.over = 1;
-			}
-		} else {
-
-			//When entering a new container, we will find the item with the least distance and append our item near it
-			dist = 10000;
-			itemWithLeastDistance = null;
-			floating = innermostContainer.floating || this._isFloating(this.currentItem);
-			posProperty = floating ? "left" : "top";
-			sizeProperty = floating ? "width" : "height";
-			axis = floating ? "clientX" : "clientY";
-
-			for (j = this.items.length - 1; j >= 0; j--) {
-				if(!$.contains(this.containers[innermostIndex].element[0], this.items[j].item[0])) {
-					continue;
-				}
-				if(this.items[j].item[0] === this.currentItem[0]) {
-					continue;
-				}
-
-				cur = this.items[j].item.offset()[posProperty];
-				nearBottom = false;
-				if ( event[ axis ] - cur > this.items[ j ][ sizeProperty ] / 2 ) {
-					nearBottom = true;
-				}
-
-				if ( Math.abs( event[ axis ] - cur ) < dist ) {
-					dist = Math.abs( event[ axis ] - cur );
-					itemWithLeastDistance = this.items[ j ];
-					this.direction = nearBottom ? "up": "down";
-				}
-			}
-
-			//Check if dropOnEmpty is enabled
-			if(!itemWithLeastDistance && !this.options.dropOnEmpty) {
-				return;
-			}
-
-			if(this.currentContainer === this.containers[innermostIndex]) {
-				return;
-			}
-
-			itemWithLeastDistance ? this._rearrange(event, itemWithLeastDistance, null, true) : this._rearrange(event, null, this.containers[innermostIndex].element, true);
-			this._trigger("change", event, this._uiHash());
-			this.containers[innermostIndex]._trigger("change", event, this._uiHash(this));
-			this.currentContainer = this.containers[innermostIndex];
+		// return helper
+			// // Helper must be absolute to function properly
+			// .css( "position", "absolute" )
+			// .offset({
+				// left: pointerPosition.x - helper.outerWidth() * xPos,
+				// top: pointerPosition.y - helper.outerHeight() * yPos
+			// });
+	// },
 
-			//Update the placeholder
-			this.options.placeholder.update(this.currentContainer, this.placeholder);
+	_getPosition: function() {
+		var left, top, position,
+			scrollTop = this.scrollParent.scrollTop(),
+			scrollLeft = this.scrollParent.scrollLeft();
 
-			this.containers[innermostIndex]._trigger("over", event, this._uiHash(this));
-			this.containers[innermostIndex].containerCache.over = 1;
-		}
-
-
-	},
-
-	_createHelper: function(event) {
+		// If fixed or absolute
+		if ( this.cssPosition !== "relative" ) {
+			position = this.dragEl.position();
 
-		var o = this.options,
-			helper = $.isFunction(o.helper) ? $(o.helper.apply(this.element[0], [event, this.currentItem])) : (o.helper === "clone" ? this.currentItem.clone() : this.currentItem);
+			// Take into account scrollbar
+			position.top -= scrollTop;
+			position.left -= scrollLeft;
 
-		//Add the helper to the DOM if that didn't happen already
-		if(!helper.parents("body").length) {
-			$(o.appendTo !== "parent" ? o.appendTo : this.currentItem[0].parentNode)[0].appendChild(helper[0]);
-		}
-
-		if(helper[0] === this.currentItem[0]) {
-			this._storedCSS = { width: this.currentItem[0].style.width, height: this.currentItem[0].style.height, position: this.currentItem.css("position"), top: this.currentItem.css("top"), left: this.currentItem.css("left") };
-		}
-
-		if(!helper[0].style.width || o.forceHelperSize) {
-			helper.width(this.currentItem.width());
-		}
-		if(!helper[0].style.height || o.forceHelperSize) {
-			helper.height(this.currentItem.height());
-		}
-
-		return helper;
-
-	},
-
-	_adjustOffsetFromHelper: function(obj) {
-		if (typeof obj === "string") {
-			obj = obj.split(" ");
-		}
-		if ($.isArray(obj)) {
-			obj = {left: +obj[0], top: +obj[1] || 0};
-		}
-		if ("left" in obj) {
-			this.offset.click.left = obj.left + this.margins.left;
+			return position;
 		}
-		if ("right" in obj) {
-			this.offset.click.left = this.helperProportions.width - obj.right + this.margins.left;
-		}
-		if ("top" in obj) {
-			this.offset.click.top = obj.top + this.margins.top;
-		}
-		if ("bottom" in obj) {
-			this.offset.click.top = this.helperProportions.height - obj.bottom + this.margins.top;
-		}
-	},
-
-	_getParentOffset: function() {
-
 
-		//Get the offsetParent and cache its position
-		this.offsetParent = this.helper.offsetParent();
-		var po = this.offsetParent.offset();
+		// When using relative, css values are checked
+		// Otherwise the position wouldn't account for padding on ancestors
+		left = this.dragEl.css( "left" );
+		top = this.dragEl.css( "top" );
 
-		// This is a special case where we need to modify a offset calculated on start, since the following happened:
-		// 1. The position of the helper is absolute, so it's position is calculated based on the next positioned parent
-		// 2. The actual offset parent is a child of the scroll parent, and the scroll parent isn't the document, which means that
-		//    the scroll is included in the initial calculation of the offset of the parent, and never recalculated upon drag
-		if(this.cssPosition === "absolute" && this.scrollParent[0] !== document && $.contains(this.scrollParent[0], this.offsetParent[0])) {
-			po.left += this.scrollParent.scrollLeft();
-			po.top += this.scrollParent.scrollTop();
-		}
-
-		// This needs to be actually done for all browsers, since pageX/pageY includes this information
-		// with an ugly IE fix
-		if( this.offsetParent[0] === document.body || (this.offsetParent[0].tagName && this.offsetParent[0].tagName.toLowerCase() === "html" && $.ui.ie)) {
-			po = { top: 0, left: 0 };
-		}
+		// Webkit will give back auto if there is no explicit value
+		left = ( left === "auto" ) ? 0: parseInt( left, 10 );
+		top = ( top === "auto" ) ? 0: parseInt( top, 10 );
 
 		return {
-			top: po.top + (parseInt(this.offsetParent.css("borderTopWidth"),10) || 0),
-			left: po.left + (parseInt(this.offsetParent.css("borderLeftWidth"),10) || 0)
+			left: left - scrollLeft,
+			top: top - scrollTop
 		};
-
-	},
-
-	_getRelativeOffset: function() {
-
-		if(this.cssPosition === "relative") {
-			var p = this.currentItem.position();
-			return {
-				top: p.top - (parseInt(this.helper.css("top"),10) || 0) + this.scrollParent.scrollTop(),
-				left: p.left - (parseInt(this.helper.css("left"),10) || 0) + this.scrollParent.scrollLeft()
-			};
-		} else {
-			return { top: 0, left: 0 };
-		}
-
 	},
 
-	_cacheMargins: function() {
-		this.margins = {
-			left: (parseInt(this.currentItem.css("marginLeft"),10) || 0),
-			top: (parseInt(this.currentItem.css("marginTop"),10) || 0)
+	_handleScrolling: function( pointerPosition ) {
+		var scrollTop = this.scrollParent.scrollTop(),
+			scrollLeft = this.scrollParent.scrollLeft(),
+			scrollSensitivity = 20,
+			baseSpeed = 5,
+			speed = function( distance ) {
+				return baseSpeed + Math.round( distance / 2 );
+			},
+			// overflowOffset is only set when scrollParent is not doc/html
+			overflowLeft = this.overflowOffset ?
+				this.overflowOffset.left :
+				scrollLeft,
+			overflowTop = this.overflowOffset ?
+				this.overflowOffset.top :
+				scrollTop,
+			xRight = this.overflow.width + overflowLeft - pointerPosition.x,
+			xLeft = pointerPosition.x - overflowLeft,
+			yBottom = this.overflow.height + overflowTop - pointerPosition.y,
+			yTop = pointerPosition.y - overflowTop;
+
+		// Handle vertical scrolling
+		if ( yBottom < scrollSensitivity ) {
+			this.scrollParent.scrollTop( scrollTop +
+				speed( scrollSensitivity - yBottom ) );
+		} else if ( yTop < scrollSensitivity ) {
+			this.scrollParent.scrollTop( scrollTop -
+				speed( scrollSensitivity - yTop ) );
+		}
+
+		// Handle horizontal scrolling
+		if ( xRight < scrollSensitivity ) {
+			this.scrollParent.scrollLeft( scrollLeft +
+				speed( scrollSensitivity - xRight ) );
+		} else if ( xLeft < scrollSensitivity ) {
+			this.scrollParent.scrollLeft( scrollLeft -
+				speed( scrollSensitivity - xLeft ) );
+		}
+	},
+
+	// Uses event to determine new position of draggable, before any override from callbacks
+	// TODO: handle absolute element inside relative parent like a relative element
+	_preparePosition: function( pointerPosition ) {
+		var leftDiff = pointerPosition.x - this.originalPointer.x,
+			topDiff = pointerPosition.y - this.originalPointer.y,
+			newLeft = leftDiff + this.startPosition.left,
+			newTop = topDiff + this.startPosition.top;
+
+		// Save off new values for .css() in various callbacks using this function
+		this.position = {
+			left: newLeft,
+			top: newTop
 		};
-	},
 
-	_cacheHelperProportions: function() {
-		this.helperProportions = {
-			width: this.helper.outerWidth(),
-			height: this.helper.outerHeight()
+		// Save off values to compare user override against automatic coordinates
+		this.tempPosition = {
+			left: newLeft,
+			top: newTop
 		};
+
+		// Refresh offset cache with new positions
+		this.offset.left = this.startOffset.left + leftDiff;
+		this.offset.top = this.startOffset.top + topDiff;
 	},
 
-	_setContainment: function() {
+	// Places draggable where event, or user via event/callback, indicates
+	_setCss: function() {
+		var newLeft = this.position.left,
+			newTop = this.position.top;
 
-		var ce, co, over,
-			o = this.options;
-		if(o.containment === "parent") {
-			o.containment = this.helper[0].parentNode;
-		}
-		if(o.containment === "document" || o.containment === "window") {
-			this.containment = [
-				0 - this.offset.relative.left - this.offset.parent.left,
-				0 - this.offset.relative.top - this.offset.parent.top,
-				$(o.containment === "document" ? document : window).width() - this.helperProportions.width - this.margins.left,
-				($(o.containment === "document" ? document : window).height() || document.body.parentNode.scrollHeight) - this.helperProportions.height - this.margins.top
-			];
+		// User overriding left/top so shortcut math is no longer valid
+		if ( this.tempPosition.left !== this.position.left ||
+				this.tempPosition.top !== this.position.top ) {
+			// Reset offset based on difference of expected and overridden values
+			this.offset.left += newLeft - this.tempPosition.left;
+			this.offset.top += newTop - this.tempPosition.top;
 		}
 
-		if(!(/^(document|window|parent)$/).test(o.containment)) {
-			ce = $(o.containment)[0];
-			co = $(o.containment).offset();
-			over = ($(ce).css("overflow") !== "hidden");
-
-			this.containment = [
-				co.left + (parseInt($(ce).css("borderLeftWidth"),10) || 0) + (parseInt($(ce).css("paddingLeft"),10) || 0) - this.margins.left,
-				co.top + (parseInt($(ce).css("borderTopWidth"),10) || 0) + (parseInt($(ce).css("paddingTop"),10) || 0) - this.margins.top,
-				co.left+(over ? Math.max(ce.scrollWidth,ce.offsetWidth) : ce.offsetWidth) - (parseInt($(ce).css("borderLeftWidth"),10) || 0) - (parseInt($(ce).css("paddingRight"),10) || 0) - this.helperProportions.width - this.margins.left,
-				co.top+(over ? Math.max(ce.scrollHeight,ce.offsetHeight) : ce.offsetHeight) - (parseInt($(ce).css("borderTopWidth"),10) || 0) - (parseInt($(ce).css("paddingBottom"),10) || 0) - this.helperProportions.height - this.margins.top
-			];
+		// TODO: does this work with nested scrollable parents?
+		if ( this.cssPosition !== "fixed" ) {
+			newLeft += this.scrollParent.scrollLeft();
+			newTop += this.scrollParent.scrollTop();
 		}
 
+		this.dragEl.css({
+			left: newLeft,
+			top: newTop
+		});
 	},
 
-	_convertPositionTo: function(d, pos) {
-
-		if(!pos) {
-			pos = this.position;
-		}
-		var mod = d === "absolute" ? 1 : -1,
-			scroll = this.cssPosition === "absolute" && !(this.scrollParent[0] !== document && $.contains(this.scrollParent[0], this.offsetParent[0])) ? this.offsetParent : this.scrollParent,
-			scrollIsRootNode = (/(html|body)/i).test(scroll[0].tagName);
-
-		return {
-			top: (
-				pos.top	+																// The absolute mouse position
-				this.offset.relative.top * mod +										// Only for relative positioned nodes: Relative offset from element to offset parent
-				this.offset.parent.top * mod -											// The offsetParent's offset without borders (offset + border)
-				( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollTop() : ( scrollIsRootNode ? 0 : scroll.scrollTop() ) ) * mod)
-			),
-			left: (
-				pos.left +																// The absolute mouse position
-				this.offset.relative.left * mod +										// Only for relative positioned nodes: Relative offset from element to offset parent
-				this.offset.parent.left * mod	-										// The offsetParent's offset without borders (offset + border)
-				( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : scroll.scrollLeft() ) * mod)
-			)
+	_originalHash: function( pointerPosition ) {
+		var ret = {
+			position: this.position,
+			offset: copy( this.offset ),
+			pointer: copy( pointerPosition )
 		};
 
-	},
-
-	_generatePosition: function(event) {
-
-		var top, left,
-			o = this.options,
-			pageX = event.pageX,
-			pageY = event.pageY,
-			scroll = this.cssPosition === "absolute" && !(this.scrollParent[0] !== document && $.contains(this.scrollParent[0], this.offsetParent[0])) ? this.offsetParent : this.scrollParent, scrollIsRootNode = (/(html|body)/i).test(scroll[0].tagName);
-
-		// This is another very weird special case that only happens for relative elements:
-		// 1. If the css position is relative
-		// 2. and the scroll parent is the document or similar to the offset parent
-		// we have to refresh the relative offset during the scroll so there are no jumps
-		if(this.cssPosition === "relative" && !(this.scrollParent[0] !== document && this.scrollParent[0] !== this.offsetParent[0])) {
-			this.offset.relative = this._getRelativeOffset();
+		if ( this.options.helper ) {
+			ret.helper = this.dragEl;
 		}
 
-		/*
-		 * - Position constraining -
-		 * Constrain the position to a mix of grid, containment.
-		 */
-
-		if(this.originalPosition) { //If we are not dragging yet, we won't check for options
-
-			if(this.containment) {
-				if(event.pageX - this.offset.click.left < this.containment[0]) {
-					pageX = this.containment[0] + this.offset.click.left;
-				}
-				if(event.pageY - this.offset.click.top < this.containment[1]) {
-					pageY = this.containment[1] + this.offset.click.top;
-				}
-				if(event.pageX - this.offset.click.left > this.containment[2]) {
-					pageX = this.containment[2] + this.offset.click.left;
-				}
-				if(event.pageY - this.offset.click.top > this.containment[3]) {
-					pageY = this.containment[3] + this.offset.click.top;
-				}
-			}
-
-			if(o.grid) {
-				top = this.originalPageY + Math.round((pageY - this.originalPageY) / o.grid[1]) * o.grid[1];
-				pageY = this.containment ? ( (top - this.offset.click.top >= this.containment[1] && top - this.offset.click.top <= this.containment[3]) ? top : ((top - this.offset.click.top >= this.containment[1]) ? top - o.grid[1] : top + o.grid[1])) : top;
-
-				left = this.originalPageX + Math.round((pageX - this.originalPageX) / o.grid[0]) * o.grid[0];
-				pageX = this.containment ? ( (left - this.offset.click.left >= this.containment[0] && left - this.offset.click.left <= this.containment[2]) ? left : ((left - this.offset.click.left >= this.containment[0]) ? left - o.grid[0] : left + o.grid[0])) : left;
-			}
-
-		}
-
-		return {
-			top: (
-				pageY -																// The absolute mouse position
-				this.offset.click.top -													// Click offset (relative to the element)
-				this.offset.relative.top	-											// Only for relative positioned nodes: Relative offset from element to offset parent
-				this.offset.parent.top +												// The offsetParent's offset without borders (offset + border)
-				( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollTop() : ( scrollIsRootNode ? 0 : scroll.scrollTop() ) ))
-			),
-			left: (
-				pageX -																// The absolute mouse position
-				this.offset.click.left -												// Click offset (relative to the element)
-				this.offset.relative.left	-											// Only for relative positioned nodes: Relative offset from element to offset parent
-				this.offset.parent.left +												// The offsetParent's offset without borders (offset + border)
-				( ( this.cssPosition === "fixed" ? -this.scrollParent.scrollLeft() : scrollIsRootNode ? 0 : scroll.scrollLeft() ))
-			)
-		};
-
+		return ret;
 	},
 
-	_rearrange: function(event, i, a, hardRefresh) {
-
-		a ? a[0].appendChild(this.placeholder[0]) : i.item[0].parentNode.insertBefore(this.placeholder[0], (this.direction === "down" ? i.item[0] : i.item[0].nextSibling));
-
-		//Various things done here to improve the performance:
-		// 1. we create a setTimeout, that calls refreshPositions
-		// 2. on the instance, we have a counter variable, that get's higher after every append
-		// 3. on the local scope, we copy the counter variable, and check in the timeout, if it's still the same
-		// 4. this lets only the last addition to the timeout stack through
-		this.counter = this.counter ? ++this.counter : 1;
-		var counter = this.counter;
-
-		this._delay(function() {
-			if(counter === this.counter) {
-				this.refreshPositions(!hardRefresh); //Precompute after each DOM insertion, NOT on mousemove
-			}
+	_fullHash: function( pointerPosition ) {
+		return $.extend( this._originalHash( pointerPosition ), {
+			originalPosition: copy( this.originalPosition ),
+			originalOffset: copy( this.originalOffset ),
+			originalPointer: copy( this.originalPointer )
 		});
-
 	},
 
-	_clear: function(event, noPropagation) {
-
-		this.reverting = false;
-		// We delay all events that have to be triggered to after the point where the placeholder has been removed and
-		// everything else normalized again
-		var i,
-			delayedTriggers = [];
-
-		// We first have to update the dom position of the actual currentItem
-		// Note: don't do it if the current item is already removed (by a user), or it gets reappended (see #4088)
-		if(!this._noFinalSort && this.currentItem.parent().length) {
-			this.placeholder.before(this.currentItem);
-		}
-		this._noFinalSort = null;
-
-		if(this.helper[0] === this.currentItem[0]) {
-			for(i in this._storedCSS) {
-				if(this._storedCSS[i] === "auto" || this._storedCSS[i] === "static") {
-					this._storedCSS[i] = "";
-				}
-			}
-			this.currentItem.css(this._storedCSS).removeClass("ui-sortable-helper");
-		} else {
-			this.currentItem.show();
-		}
-
-		if(this.fromOutside && !noPropagation) {
-			delayedTriggers.push(function(event) { this._trigger("receive", event, this._uiHash(this.fromOutside)); });
-		}
-		if((this.fromOutside || this.domPosition.prev !== this.currentItem.prev().not(".ui-sortable-helper")[0] || this.domPosition.parent !== this.currentItem.parent()[0]) && !noPropagation) {
-			delayedTriggers.push(function(event) { this._trigger("update", event, this._uiHash()); }); //Trigger update callback if the DOM position has changed
-		}
-
-		// Check if the items Container has Changed and trigger appropriate
-		// events.
-		if (this !== this.currentContainer) {
-			if(!noPropagation) {
-				delayedTriggers.push(function(event) { this._trigger("remove", event, this._uiHash()); });
-				delayedTriggers.push((function(c) { return function(event) { c._trigger("receive", event, this._uiHash(this)); };  }).call(this, this.currentContainer));
-				delayedTriggers.push((function(c) { return function(event) { c._trigger("update", event, this._uiHash(this));  }; }).call(this, this.currentContainer));
-			}
-		}
-
-
-		//Post events to containers
-		function delayEvent( type, instance, container ) {
-			return function( event ) {
-				container._trigger( type, event, instance._uiHash( instance ) );
-			};
-		}
-		for (i = this.containers.length - 1; i >= 0; i--){
-			if (!noPropagation) {
-				delayedTriggers.push( delayEvent( "deactivate", this, this.containers[ i ] ) );
-			}
-			if(this.containers[i].containerCache.over) {
-				delayedTriggers.push( delayEvent( "out", this, this.containers[ i ] ) );
-				this.containers[i].containerCache.over = 0;
-			}
-		}
-
-		//Do what was originally in plugins
-		if ( this.storedCursor ) {
-			this.document.find( "body" ).css( "cursor", this.storedCursor );
-			this.storedStylesheet.remove();
-		}
-		if(this._storedOpacity) {
-			this.helper.css("opacity", this._storedOpacity);
-		}
-		if(this._storedZIndex) {
-			this.helper.css("zIndex", this._storedZIndex === "auto" ? "" : this._storedZIndex);
-		}
-
-		this.dragging = false;
-		if(this.cancelHelperRemoval) {
-			if(!noPropagation) {
-				this._trigger("beforeStop", event, this._uiHash());
-				for (i=0; i < delayedTriggers.length; i++) {
-					delayedTriggers[i].call(this, event);
-				} //Trigger all delayed events
-				this._trigger("stop", event, this._uiHash());
-			}
-
-			this.fromOutside = false;
-			return false;
-		}
-
-		if(!noPropagation) {
-			this._trigger("beforeStop", event, this._uiHash());
-		}
+	_blockFrames: function() {
 
-		//$(this.placeholder[0]).remove(); would have been the jQuery way - unfortunately, it unbinds ALL events from the original node!
-		this.placeholder[0].parentNode.removeChild(this.placeholder[0]);
-
-		if(this.helper[0] !== this.currentItem[0]) {
-			this.helper.remove();
-		}
-		this.helper = null;
-
-		if(!noPropagation) {
-			for (i=0; i < delayedTriggers.length; i++) {
-				delayedTriggers[i].call(this, event);
-			} //Trigger all delayed events
-			this._trigger("stop", event, this._uiHash());
-		}
-
-		this.fromOutside = false;
-		return true;
+		this.iframeBlocks = this.document.find( "iframe" ).map(function() {
+			var iframe = $( this );
 
+			return $( "<div>" )
+				.css({
+					position: "absolute",
+					width: iframe.outerWidth(),
+					height: iframe.outerHeight()
+				})
+				.appendTo( iframe.parent() )
+				.offset( iframe.offset() )[0];
+		});
 	},
 
-	_trigger: function() {
-		if ($.Widget.prototype._trigger.apply(this, arguments) === false) {
-			this.cancel();
+	_unblockFrames: function() {
+		if ( this.iframeBlocks ) {
+			this.iframeBlocks.remove();
+			delete this.iframeBlocks;
 		}
 	},
 
-	_uiHash: function(_inst) {
-		var inst = _inst || this;
-		return {
-			helper: inst.helper,
-			placeholder: inst.placeholder || $([]),
-			position: inst.position,
-			originalPosition: inst.originalPosition,
-			offset: inst.positionAbs,
-			item: inst.currentItem,
-			sender: _inst ? _inst.element : null
-		};
+	_destroy: function() {
+		this.element.removeClass( "ui-sortable" );
+		this._super();
 	}
-
 });
 
+return $.ui.sortable;
+
 }));