Draggable: Helper option can now take function that returns DOMElement

This commit is contained in:
= 2011-10-01 12:38:48 -04:00
parent 1f23656fe2
commit 7ef6df95eb

View File

@ -29,7 +29,7 @@ $.widget( "ui.draggable", {
}, },
_create: function() { _create: function() {
// Either initialized element or the helper // Either initialized element or the helper
this.dragEl = false, this.dragEl = false,
@ -59,13 +59,17 @@ $.widget( "ui.draggable", {
this.element.bind( "mousedown." + this.widgetName, $.proxy( this._mouseDown, this ) ); this.element.bind( "mousedown." + this.widgetName, $.proxy( this._mouseDown, this ) );
}, },
_usingHelper : function() {
return ( this.options.helper === true || typeof this.options.helper === 'function' );
},
_setPosition: function() { _setPosition: function() {
var left, top, position, cssPosition; var left, top, position, cssPosition;
// Helper is appended to body so offset of element is all that"s needed // Helper is appended to body so offset of element is all that's needed
if ( this.options.helper === true ) { if ( this._usingHelper() ) {
return this.element.offset(); return this.element.offset();
} }
@ -86,7 +90,7 @@ $.widget( "ui.draggable", {
return position; return position;
} // cssPosition !+== absolute }
/** When using relative, css values are checked **/ /** When using relative, css values are checked **/
@ -108,29 +112,47 @@ $.widget( "ui.draggable", {
_mouseDown: function( event ) { _mouseDown: function( event ) {
// The actual dragging element, should always be a jQuery object
this.dragEl = this.element; this.dragEl = this.element;
// Helper required, so clone, hide, and set reference // 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 this.dragEl = this.element.clone();
if ( this.element.attr( "id" ) ) {
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({ .css({
position: "absolute", position: "absolute"
display: "none"
}) })
.disableSelection() .disableSelection();
.attr( "id", this.element.attr( "id" ) + "-" + this.widgetName );
} // id
$( "body" ).append( this.dragEl ); $( "body" ).append( this.dragEl );
} // if this.options.helper = true }
// Cache starting absolute and relative positions // Cache starting absolute and relative positions
this.startPosition = this._setPosition(); this.startPosition = this._setPosition();
@ -152,7 +174,7 @@ $.widget( "ui.draggable", {
// Set the helper up by actual element // 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 // get the absolute position of element so that helper will know where to go
elOffset = this.element.offset(); elOffset = this.element.offset();
@ -163,7 +185,7 @@ $.widget( "ui.draggable", {
left: elOffset.left + "px" left: elOffset.left + "px"
}); });
} // this.options.height = true }
}, },
@ -208,7 +230,7 @@ $.widget( "ui.draggable", {
this.startCoords = {}; this.startCoords = {};
if ( this.options.helper === true ) { if ( this._usingHelper() ) {
this.dragEl.remove(); this.dragEl.remove();
} }