Draggable: Added appendTo option.

This commit is contained in:
Scott González 2012-01-22 21:51:46 -05:00
parent 91bf052d81
commit 7236f2935a

View File

@ -19,6 +19,7 @@ $.widget( "ui.draggable", $.ui.interaction, {
widgetEventPrefix: "drag", widgetEventPrefix: "drag",
options: { options: {
appendTo: null,
handle: null, handle: null,
helper: null helper: null
}, },
@ -32,6 +33,8 @@ $.widget( "ui.draggable", $.ui.interaction, {
// tempPosition: overridable CSS position of dragEl // tempPosition: overridable CSS position of dragEl
// overflowOffset: offset of scroll parent // overflowOffset: offset of scroll parent
// overflow: object containing width and height keys 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
_create: function() { _create: function() {
this._super(); this._super();
@ -48,11 +51,26 @@ $.widget( "ui.draggable", $.ui.interaction, {
}, },
_start: function( event, pointerPosition ) { _start: function( event, pointerPosition ) {
var offset;
// The actual dragging element, should always be a jQuery object // The actual dragging element, should always be a jQuery object
this.dragEl = this.options.helper ? this.dragEl = this.options.helper ?
this._createHelper( pointerPosition ) : this._createHelper( pointerPosition ) :
this.element; this.element;
// _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.cssPosition = this.dragEl.css( "position" );
this.scrollParent = this.element.scrollParent(); this.scrollParent = this.element.scrollParent();
@ -105,6 +123,8 @@ $.widget( "ui.draggable", $.ui.interaction, {
}, },
_stop: function( event, pointerPosition ) { _stop: function( event, pointerPosition ) {
var parent, next;
this._preparePosition( pointerPosition ); this._preparePosition( pointerPosition );
// If user cancels stop, leave helper there // If user cancels stop, leave helper there
@ -112,6 +132,16 @@ $.widget( "ui.draggable", $.ui.interaction, {
if ( this.options.helper ) { if ( this.options.helper ) {
this.dragEl.remove(); this.dragEl.remove();
} }
if ( this.domPosition ) {
parent = this.domPosition.parent;
next = parent.children().eq( this.domPosition.index );
if ( next.length ) {
next.before( this.element );
} else {
parent.append( this.element );
}
this.element.offset( this.offset );
}
} }
this._unblockFrames(); this._unblockFrames();
@ -137,11 +167,14 @@ $.widget( "ui.draggable", $.ui.interaction, {
helper = $( this.options.helper() ); helper = $( this.options.helper() );
} }
// 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 );
}
return helper return helper
// Helper must be absolute to function properly // Helper must be absolute to function properly
.css( "position", "absolute" ) .css( "position", "absolute" )
// TODO: add appendTo option
.appendTo( this.document[0].body )
.offset({ .offset({
left: pointerPosition.x - helper.outerWidth() * xPos, left: pointerPosition.x - helper.outerWidth() * xPos,
top: pointerPosition.y - helper.outerHeight() * yPos top: pointerPosition.y - helper.outerHeight() * yPos