library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2024-11-21 11:04:24 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Draggable: Cleanup.

Browse Source
This commit is contained in:
Scott González 2013-03-13 14:56:28 -04:00
parent 2d7e150cb6
commit 0beb25e865
2 changed files with 238 additions and 274 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
tests/unit/draggable/draggable_options.js
View File

@ -229,7 +229,7 @@ test( "{ cancel: Selectors }, matching parent selector", function() {
}); });
*/ */
test( "cancelement, default, switching after initialization", function() { test( "cancel, default, switching after initialization", function() {
expect( 3 ); expect( 3 );
$( "<div id='draggable-option-cancel-default'><input type='text'></div>" ).appendTo( "#main" ); $( "<div id='draggable-option-cancel-default'><input type='text'></div>" ).appendTo( "#main" );

510
ui/jquery.ui.draggable.js vendored
View File

@ -563,35 +563,27 @@ $.widget( "ui.draggable", $.ui.draggable, {
// DEPRECATED // DEPRECATED
if ( $.uiBackCompat !== false ) { if ( $.uiBackCompat !== false ) {
// appendTo 'parent' value // appendTo "parent" value
$.widget( "ui.draggable", $.ui.draggable, { $.widget( "ui.draggable", $.ui.draggable, {
// Helper passed in since _createHelper calls this before dragEl is set
_appendTo: function() { _appendTo: function() {
var el = this.options.appendTo; var element = this.options.appendTo;
// This should only happen via _createHelper // This should only happen via _createHelper()
if ( el === null ) { if ( element === null ) {
return this.element.parent(); return this.element.parent();
} }
if ( el === "parent" ) { if ( element === "parent" ) {
el = this.dragEl.parent(); element = this.dragEl.parent();
} }
return el; return element;
} }
}); });
// helper 'original' or 'clone' value + helper return value // helper "original" or "clone" value + helper return value
$.widget( "ui.draggable", $.ui.draggable, { $.widget( "ui.draggable", $.ui.draggable, {
_create: function() { _create: function() {
var self = this,
orig = this._originalHash;
this._super();
if ( this.options.helper === "original" ) { if ( this.options.helper === "original" ) {
this.options.helper = false; this.options.helper = false;
} }
@ -600,27 +592,23 @@ if ( $.uiBackCompat !== false ) {
this.options.helper = true; this.options.helper = true;
} }
this._originalHash = function() { this._super();
var ret = orig.apply( self, arguments ); },
if ( !ret.helper ) { _originalHash: function() {
ret.helper = self.element; var ret = this._superApply( arguments );
}
return ret; if ( !ret.helper ) {
}; ret.helper = this.element;
}
return ret;
}, },
_setOption: function( key, value ) { _setOption: function( key, value ) {
if ( key !== "helper" ) { if ( key === "helper" && value === "clone" ) {
return this._super( key, value );
}
if ( value === "clone" ) {
value = true; value = true;
} } else if ( key === "helper" && value === "original" ) {
if ( value === "original" ) {
value = false; value = false;
} }
@ -635,19 +623,17 @@ if ( $.uiBackCompat !== false ) {
}, },
_create: function() { _create: function() {
var self = this;
this._super(); this._super();
// On drag, make sure top does not change so axis is locked this._on({
this.element.on( "drag", function( event, ui ) { drag: function( event, ui ) {
if ( this.options.axis === "x" ) {
ui.position.top = ui.originalPosition.top;
}
if ( self.options.axis === "x" ) { if ( this.options.axis === "y" ) {
ui.position.top = ui.originalPosition.top; ui.position.left = ui.originalPosition.left;
} }
if ( self.options.axis === "y" ) {
ui.position.left = ui.originalPosition.left;
} }
}); });
} }
@ -660,20 +646,20 @@ if ( $.uiBackCompat !== false ) {
}, },
_create: function() { _create: function() {
this._super();
if ( this.options.cancel !== null ) { if ( this.options.cancel !== null ) {
this.options.exclude = this.options.cancel; this.options.exclude = this.options.cancel;
} }
this._super();
}, },
_setOption: function( key, value ) { _setOption: function( key, value ) {
if ( key !== "cancel" ) { if ( key === "cancel" ) {
return this._super( key, value ); key = "exclude";
} }
this._super( key, value ); this._super( key, value );
this.options.exclude = this.options.cancel; this.options.cancel = this.options.exclude;
} }
}); });
@ -684,28 +670,26 @@ if ( $.uiBackCompat !== false ) {
}, },
_create: function() { _create: function() {
var startCursor, self, body; var startCursor, body;
this._super(); this._super();
self = this; body = $( this.document[ 0 ].body );
body = $( this.document[0].body );
// Cache original cursor to set back this._on({
this.element.on( "dragbeforestart", function() { // Cache original cursor to set back
dragbeforestart: function() {
if ( this.options.cursor ) {
startCursor = body[ 0 ].style.cursor;
body.css( "cursor", this.options.cursor );
}
},
if ( self.options.cursor ) { // Set back cursor to whatever default was
startCursor = body[0].style.cursor; dragstop: function() {
body.css( "cursor", self.options.cursor ); if ( this.options.cursor ) {
} body.css( "cursor", startCursor );
}
});
// Set back cursor to whatever default was
this.element.on( "dragstop", function() {
if ( self.options.cursor ) {
body.css( "cursor", startCursor );
} }
}); });
} }
@ -718,41 +702,44 @@ if ( $.uiBackCompat !== false ) {
}, },
_create: function() { _create: function() {
var self = this;
this._super(); this._super();
this.element.on( "dragbeforestart", function( event, ui ) { this._on({
var cursorAt = self.options.cursorAt; dragbeforestart: function( event, ui ) {
var cursorAt = this.options.cursorAt;
// No need to continue if ( !cursorAt ) {
if ( !cursorAt ) { return;
return; }
}
// support array and string position notation if ( typeof cursorAt === "string" ) {
// TODO: Remove after 2.0, only used for backCompat cursorAt = cursorAt.split(" ");
if ( typeof cursorAt === "string" ) { }
cursorAt = cursorAt.split(" "); if ( $.isArray( cursorAt ) ) {
} cursorAt = {
if ( $.isArray( cursorAt ) ) { left: +cursorAt[ 0 ],
cursorAt = { top: +cursorAt[ 1 ] || 0
left: +cursorAt[ 0 ], };
top: +cursorAt[ 1 ] || 0 }
};
}
if ( "top" in cursorAt ) { if ( "top" in cursorAt ) {
ui.position.top += ui.pointer.y - ui.offset.top - cursorAt.top; 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 ( "left" in cursorAt ) {
} ui.position.left += ui.pointer.x -
if ( "bottom" in cursorAt ) { ui.offset.left - cursorAt.left;
ui.position.top += ui.pointer.y - ui.offset.top - self.dragDimensions.height + cursorAt.bottom; }
} if ( "bottom" in cursorAt ) {
if ( "right" in cursorAt ) { ui.position.top += ui.pointer.y -
ui.position.left += ui.pointer.x - ui.offset.left - self.dragDimensions.width + cursorAt.right; 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;
}
} }
}); });
} }
@ -765,52 +752,53 @@ if ( $.uiBackCompat !== false ) {
}, },
_create: function() { _create: function() {
var self = this, var currentX, currentY;
currentX, currentY;
this._super(); this._super();
this.element.on( "dragbeforestart", function( event, ui ) { this._on({
if ( !self.options.grid ) { dragbeforestart: function( event, ui ) {
return; if ( !this.options.grid ) {
} return;
// Save off the start position, which may be overwritten during drag
currentX = ui.position.left;
currentY = ui.position.top;
});
this.element.on( "drag", function( event, ui ) {
if ( !self.options.grid ) {
return;
}
// Save off the intended intervals
var x = self.options.grid[0],
y = self.options.grid[1];
// If x is actually something, check that user is at least half way to next point
if ( x ) {
if ( ui.position.left - currentX >= x/2 ) {
currentX = currentX + x;
} else if ( currentX - ui.position.left >= x/2 ) {
currentX = currentX - x;
} }
}
// If y is actually something, check that user is at least half way to next point // Save off the start position,
if ( y ) { // which may be overwritten during drag
if ( ui.position.top - currentY >= y/2 ) { currentX = ui.position.left;
currentY = currentY + y; currentY = ui.position.top;
} else if ( currentY - ui.position.top >= y/2 ) { },
currentY = currentY - y;
drag: function( event, ui ) {
if ( !this.options.grid ) {
return;
} }
}
// If there threshold wasn't crossed these variables wouldn't be changed // Save off the intended intervals
// Otherwise this will now bump the draggable to the next spot on grid var x = this.options.grid[ 0 ],
ui.position.left = currentX; y = this.options.grid[ 1 ];
ui.position.top = currentY;
// 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;
}
}
// Force the draggable to the appropriate spot on the grid
ui.position.left = currentX;
ui.position.top = currentY;
}
}); });
} }
}); });
@ -822,34 +810,31 @@ if ( $.uiBackCompat !== false ) {
}, },
_create: function() { _create: function() {
var self = this, var originalOpacity;
originalOpacity;
this._super(); this._super();
this.element.on( "dragstart", function() { this._on({
dragstart: function() {
if ( !this.options.opacity ) {
return;
}
// No need to continue // Cache the original opacity of draggable element to reset later
if ( !self.options.opacity ) { originalOpacity = this.dragEl.css( "opacity" );
return;
// Set draggable element to new opacity
this.dragEl.css( "opacity", this.options.opacity );
},
dragstop: function() {
if ( !this.options.opacity ) {
return;
}
// Reset opacity
this.dragEl.css( "opacity", originalOpacity );
} }
// Cache the original opacity of draggable element to reset later
originalOpacity = self.dragEl.css( "opacity" );
// Set draggable element to new opacity
self.dragEl.css( "opacity", self.options.opacity );
});
this.element.on( "dragstop", function() {
// No need to continue
if ( !self.options.opacity ) {
return;
}
// Reset opacity
self.dragEl.css( "opacity", originalOpacity );
}); });
} }
}); });
@ -863,38 +848,34 @@ if ( $.uiBackCompat !== false ) {
}, },
_create: function() { _create: function() {
var self = this, var originalLeft, originalTop, originalPosition;
originalLeft, originalTop, originalPosition;
this._super(); this._super();
this.element.on( "dragbeforestart", function() { this._on({
dragbeforestart: function() {
if ( !this.options.revert ) {
return;
}
// No need to continue // Cache the original css of draggable element to reset later
if ( !self.options.revert ) { originalLeft = this.dragEl.css( "left" );
return; originalTop = this.dragEl.css( "top" );
originalPosition = this.dragEl.css( "position" );
},
dragstop: function() {
if ( !this.options.revert ) {
return;
}
// Reset to before drag
this.dragEl.animate({
left: originalLeft,
top: originalTop,
position: originalPosition
}, this.options.revertDuration );
} }
// Cache the original css of draggable element to reset later
originalLeft = self.dragEl.css( "left" );
originalTop = self.dragEl.css( "top" );
originalPosition = self.dragEl.css( "position" );
});
this.element.on( "dragstop", function() {
// No need to continue
if ( !self.options.revert ) {
return;
}
// Reset to before drag
self.dragEl.animate({
left: originalLeft,
top: originalTop,
position: originalPosition
}, self.options.revertDuration );
}); });
} }
}); });
@ -906,34 +887,31 @@ if ( $.uiBackCompat !== false ) {
}, },
_create: function() { _create: function() {
var self = this, var originalZindex;
originalZIndex;
this._super(); this._super();
this.element.on( "dragstart", function() { this._on({
dragstart: function() {
if ( !this.options.zIndex ) {
return;
}
// No need to continue // Cache the original zIndex of draggable element to reset later
if ( !self.options.zIndex ) { originalZindex = this.dragEl.css( "z-index" );
return;
// 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 );
} }
// Cache the original zIndex of draggable element to reset later
originalZIndex = self.dragEl.css( "z-index" );
// Set draggable element to new zIndex
self.dragEl.css( "z-index", self.options.zIndex );
});
this.element.on( "dragstop", function() {
// No need to continue
if ( !self.options.zIndex ) {
return;
}
// Reset zIndex
self.dragEl.css( "z-index", originalZIndex );
}); });
} }
}); });
@ -952,38 +930,28 @@ if ( $.uiBackCompat !== false ) {
scrollSpeed: 20, scrollSpeed: 20,
scrollSensitivity: 20 scrollSensitivity: 20
}, },
_create: function() {
var self = this,
handleScroll = this._handleScrolling,
speed = this._speed;
this._super(); _speed: function( distance ) {
if ( this.options.scrollSpeed !== null ) {
this.scrollSpeed = this.options.scrollSpeed;
this._speed = function( distance ) { // Undo calculation that makes things go faster as distance increases
if ( self.options.scrollSpeed !== null ) { distance = 0;
}
self.scrollSpeed = self.options.scrollSpeed; return this._super( distance );
},
// Undo calculation that makes things go faster as distance increases _handleScrolling: function( pointerPosition ) {
distance = 0; if ( !this.options.scroll ) {
} return;
}
return speed.call( self, distance ); if ( this.options.scrollSensitivity !== null ) {
}; this.scrollSensitivity = this.options.scrollSensitivity;
}
// Wrap member function to check for ability to scroll this._super( pointerPosition );
this._handleScrolling = function( pointerPosition ) {
if ( !self.options.scroll ) {
return;
}
if ( self.options.scrollSensitivity !== null ) {
self.scrollSensitivity = self.options.scrollSensitivity;
}
handleScroll.call( self, pointerPosition );
};
} }
}); });
@ -994,44 +962,41 @@ if ( $.uiBackCompat !== false ) {
}, },
_create: function() { _create: function() {
var self = this;
this._super(); this._super();
this.element.on( "dragbeforestart", function() { this._on({
dragbeforestart: function() {
var group, min,
stack = this.options.stack;
var stack = self.options.stack, if ( !stack ) {
group, min; return;
}
if ( !self.options.stack ) { group = $.makeArray( $( stack ) ).sort(function( a, b ) {
return; var aZIndex = parseInt( $( a ).css( "zIndex" ), 10 ) || 0,
bZIndex = parseInt( $( b ).css( "zIndex" ), 10 ) || 0;
return aZIndex - bZIndex;
});
if ( !group.length ) {
return;
}
min = parseInt( group[ 0 ].style.zIndex, 10 ) || 0;
$( group ).each(function( i ) {
this.style.zIndex = min + i;
});
this.element.css( "zIndex", min + group.length );
} }
group = $.makeArray( $(stack) ).sort(function(a,b) {
var aZIndex = parseInt( $(a).css("zIndex"), 10 ),
bZIndex = parseInt( $(b).css("zIndex"), 10 );
return ( aZIndex || 0) - ( bZIndex|| 0);
});
if (!group.length) {
return;
}
min = parseInt(group[0].style.zIndex, 10) || 0;
$(group).each(function(i) {
this.style.zIndex = min + i;
});
self.element[0].style.zIndex = min + group.length;
}); });
} }
}); });
// snap snapMode snapTolerance options // TODO: cleanup
// mainly copy-pasted from 1.9 since the code is so "insane" didn't want to reverse-engineer into sanity // snap, snapMode, and snapTolerance options
$.widget( "ui.draggable", $.ui.draggable, { $.widget( "ui.draggable", $.ui.draggable, {
options: { options: {
snap: false, snap: false,
@ -1240,25 +1205,24 @@ if ( $.uiBackCompat !== false ) {
}, },
_create: function() { _create: function() {
var self = this, var drops;
drops;
this._super(); this._super();
this.element.on( "dragstart", function() { this._on({
drops = $(":data(ui-sortable)"); dragstart: function() {
}); drops = $( ":data(ui-sortable)" );
},
// On drag, make sure top does not change so axis is locked drag: function() {
this.element.on( "drag", function() { if ( this.options.refreshPositions !== true ) {
return;
}
if ( self.options.refreshPositions !== true ) { drops.each(function() {
return; $( this ).sortable( "refreshPositions" );
});
} }
drops.each( function() {
$(this).sortable("refreshPositions");
});
}); });
} }
}); });