From 7ef6df95ebcd487e5f7284264fa59814a771ceb6 Mon Sep 17 00:00:00 2001
From: = <dave@behance.com>
Date: Sat, 1 Oct 2011 12:38:48 -0400
Subject: [PATCH] Draggable: Helper option can now take function that returns
 DOMElement

---
 ui/jquery.ui.draggable.js | 60 ++++++++++++++++++++++++++-------------
 1 file changed, 41 insertions(+), 19 deletions(-)

diff --git a/ui/jquery.ui.draggable.js b/ui/jquery.ui.draggable.js
index 13cd22b2c..0ac364bc9 100644
--- a/ui/jquery.ui.draggable.js
+++ b/ui/jquery.ui.draggable.js
@@ -29,7 +29,7 @@ $.widget( "ui.draggable", {
 	},
 
 	_create: function() {
-	
+
 		// Either initialized element or the helper
 		this.dragEl = false,
 
@@ -59,13 +59,17 @@ $.widget( "ui.draggable", {
 		this.element.bind( "mousedown." + this.widgetName, $.proxy( this._mouseDown, this ) );
 
 	},
+	
+	_usingHelper : function() {
+		return ( this.options.helper === true || typeof this.options.helper === 'function' );
+	},
 
 	_setPosition: function() {
 
 		var left, top, position, cssPosition;
 
-		// Helper is appended to body so offset of element is all that"s needed
-		if ( this.options.helper === true ) {
+		// Helper is appended to body so offset of element is all that's needed
+		if ( this._usingHelper() ) {
 			return this.element.offset();
 		}
 
@@ -86,7 +90,7 @@ $.widget( "ui.draggable", {
 
 			return position;
 
-		} // cssPosition !+== absolute
+		}
 
 		/** When using relative, css values are checked **/
 
@@ -108,29 +112,47 @@ $.widget( "ui.draggable", {
 
 	_mouseDown: function( event ) {
 
+		// The actual dragging element, should always be a jQuery object
 		this.dragEl = this.element;
 
 		// Helper required, so clone, hide, and set reference
-		if ( this.options.helper === true ) {
+		if ( this._usingHelper() ) {
 
-			this.dragEl = this.element.clone();
+			// If getting a cloned helper
+			if ( this.options.helper === true ) {
 
-			// If source element has an ID, change ID of helper to avoid overlap
-			if ( this.element.attr( "id" ) ) {
+				this.dragEl = this.element.clone();
 
-				this.dragEl
+				// If source element has an ID, change ID of helper to avoid overlap
+				if ( this.element.attr( "id" ) ) {
+
+					this.dragEl.attr( "id", this.element.attr( "id" ) + "-" + this.widgetName );
+
+				}
+
+			} else {
+			
+				this.dragEl = this.options.helper();
+				
+				// If function was passed, it should return a DOMElement
+				if ( typeof this.dragEl.nodeType !== 'number' ) {
+					throw "Helper function must return a DOMElement";
+				}
+				
+				this.dragEl = $( this.dragEl );
+			
+			}
+
+			// Automatically make helper absolute
+			this.dragEl
 					.css({
-						position: "absolute",
-						display: "none"
+						position: "absolute"
 					})
-					.disableSelection()
-					.attr( "id", this.element.attr( "id" ) + "-" + this.widgetName );
-
-			} // id
+					.disableSelection();
 
 			$( "body" ).append( this.dragEl );
 
-		} // if this.options.helper = true
+		}
 
 		// Cache starting absolute and relative positions
 		this.startPosition = this._setPosition();
@@ -152,7 +174,7 @@ $.widget( "ui.draggable", {
 
 
 		// Set the helper up by actual element
-		if ( this.options.helper === true ) {
+		if ( this._usingHelper() ) {
 
 			// get the absolute position of element so that helper will know where to go
 			elOffset = this.element.offset();
@@ -163,7 +185,7 @@ $.widget( "ui.draggable", {
 				left: elOffset.left + "px"
 			});
 
-		} // this.options.height = true
+		}
 
 	},
 
@@ -208,7 +230,7 @@ $.widget( "ui.draggable", {
 
 		this.startCoords = {};
 
-		if ( this.options.helper === true ) {
+		if ( this._usingHelper() ) {
 			this.dragEl.remove();
 		}