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" );

318
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 ); },
_originalHash: function() {
var ret = this._superApply( arguments );
if ( !ret.helper ) { if ( !ret.helper ) {
ret.helper = self.element; ret.helper = this.element;
} }
return ret; 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,20 +623,18 @@ 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" ) {
if ( self.options.axis === "x" ) {
ui.position.top = ui.originalPosition.top; ui.position.top = ui.originalPosition.top;
} }
if ( self.options.axis === "y" ) { if ( this.options.axis === "y" ) {
ui.position.left = ui.originalPosition.left; 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,29 +670,27 @@ 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 );
this._on({
// Cache original cursor to set back // Cache original cursor to set back
this.element.on( "dragbeforestart", function() { dragbeforestart: function() {
if ( this.options.cursor ) {
if ( self.options.cursor ) { startCursor = body[ 0 ].style.cursor;
startCursor = body[0].style.cursor; body.css( "cursor", this.options.cursor );
body.css( "cursor", self.options.cursor );
} }
},
});
// Set back cursor to whatever default was // Set back cursor to whatever default was
this.element.on( "dragstop", function() { dragstop: function() {
if ( this.options.cursor ) {
if ( self.options.cursor ) {
body.css( "cursor", startCursor ); body.css( "cursor", startCursor );
} }
}
}); });
} }
}); });
@ -718,20 +702,16 @@ 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
// TODO: Remove after 2.0, only used for backCompat
if ( typeof cursorAt === "string" ) { if ( typeof cursorAt === "string" ) {
cursorAt = cursorAt.split(" "); cursorAt = cursorAt.split(" ");
} }
@ -743,16 +723,23 @@ if ( $.uiBackCompat !== false ) {
} }
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 ) { if ( "left" in cursorAt ) {
ui.position.left += ui.pointer.x - ui.offset.left - cursorAt.left; ui.position.left += ui.pointer.x -
ui.offset.left - cursorAt.left;
} }
if ( "bottom" in cursorAt ) { if ( "bottom" in cursorAt ) {
ui.position.top += ui.pointer.y - ui.offset.top - self.dragDimensions.height + cursorAt.bottom; ui.position.top += ui.pointer.y -
ui.offset.top - this.dragDimensions.height +
cursorAt.bottom;
} }
if ( "right" in cursorAt ) { if ( "right" in cursorAt ) {
ui.position.left += ui.pointer.x - ui.offset.left - self.dragDimensions.width + cursorAt.right; 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 ) {
if ( !this.options.grid ) {
return; return;
} }
// Save off the start position, which may be overwritten during drag // Save off the start position,
// which may be overwritten during drag
currentX = ui.position.left; currentX = ui.position.left;
currentY = ui.position.top; currentY = ui.position.top;
}); },
this.element.on( "drag", function( event, ui ) { drag: function( event, ui ) {
if ( !self.options.grid ) { if ( !this.options.grid ) {
return; return;
} }
// Save off the intended intervals // Save off the intended intervals
var x = self.options.grid[0], var x = this.options.grid[ 0 ],
y = self.options.grid[1]; y = this.options.grid[ 1 ];
// If x is actually something, check that user is at least half way to next point // Check that user is at least half way to next point on x axis
if ( x ) { if ( x ) {
if ( ui.position.left - currentX >= x/2 ) { if ( ui.position.left - currentX >= x / 2 ) {
currentX = currentX + x; currentX = currentX + x;
} else if ( currentX - ui.position.left >= x/2 ) { } else if ( currentX - ui.position.left >= x / 2 ) {
currentX = currentX - x; currentX = currentX - x;
} }
} }
// If y is actually something, check that user is at least half way to next point // Check that user is at least half way to next point on y axis
if ( y ) { if ( y ) {
if ( ui.position.top - currentY >= y/2 ) { if ( ui.position.top - currentY >= y / 2 ) {
currentY = currentY + y; currentY = currentY + y;
} else if ( currentY - ui.position.top >= y/2 ) { } else if ( currentY - ui.position.top >= y / 2 ) {
currentY = currentY - y; currentY = currentY - y;
} }
} }
// If there threshold wasn't crossed these variables wouldn't be changed // Force the draggable to the appropriate spot on the grid
// Otherwise this will now bump the draggable to the next spot on grid
ui.position.left = currentX; ui.position.left = currentX;
ui.position.top = currentY; 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() {
// No need to continue if ( !this.options.opacity ) {
if ( !self.options.opacity ) {
return; return;
} }
// Cache the original opacity of draggable element to reset later // Cache the original opacity of draggable element to reset later
originalOpacity = self.dragEl.css( "opacity" ); originalOpacity = this.dragEl.css( "opacity" );
// Set draggable element to new opacity // Set draggable element to new opacity
self.dragEl.css( "opacity", self.options.opacity ); this.dragEl.css( "opacity", this.options.opacity );
}); },
this.element.on( "dragstop", function() { dragstop: function() {
if ( !this.options.opacity ) {
// No need to continue
if ( !self.options.opacity ) {
return; return;
} }
// Reset opacity // Reset opacity
self.dragEl.css( "opacity", originalOpacity ); this.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() {
// No need to continue if ( !this.options.revert ) {
if ( !self.options.revert ) {
return; return;
} }
// Cache the original css of draggable element to reset later // Cache the original css of draggable element to reset later
originalLeft = self.dragEl.css( "left" ); originalLeft = this.dragEl.css( "left" );
originalTop = self.dragEl.css( "top" ); originalTop = this.dragEl.css( "top" );
originalPosition = self.dragEl.css( "position" ); originalPosition = this.dragEl.css( "position" );
},
}); dragstop: function() {
if ( !this.options.revert ) {
this.element.on( "dragstop", function() {
// No need to continue
if ( !self.options.revert ) {
return; return;
} }
// Reset to before drag // Reset to before drag
self.dragEl.animate({ this.dragEl.animate({
left: originalLeft, left: originalLeft,
top: originalTop, top: originalTop,
position: originalPosition position: originalPosition
}, self.options.revertDuration ); }, this.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() {
// No need to continue if ( !this.options.zIndex ) {
if ( !self.options.zIndex ) {
return; return;
} }
// Cache the original zIndex of draggable element to reset later // Cache the original zIndex of draggable element to reset later
originalZIndex = self.dragEl.css( "z-index" ); originalZindex = this.dragEl.css( "z-index" );
// Set draggable element to new zIndex // Set draggable element to new zIndex
self.dragEl.css( "z-index", self.options.zIndex ); this.dragEl.css( "z-index", this.options.zIndex );
}); },
this.element.on( "dragstop", function() { dragstop: function() {
if ( !this.options.zIndex ) {
// No need to continue
if ( !self.options.zIndex ) {
return; return;
} }
// Reset zIndex // Reset zIndex
self.dragEl.css( "z-index", originalZIndex ); this.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._speed = function( distance ) { this.scrollSpeed = this.options.scrollSpeed;
if ( self.options.scrollSpeed !== null ) {
self.scrollSpeed = self.options.scrollSpeed;
// Undo calculation that makes things go faster as distance increases // Undo calculation that makes things go faster as distance increases
distance = 0; distance = 0;
} }
return speed.call( self, distance ); return this._super( distance );
}; },
// Wrap member function to check for ability to scroll _handleScrolling: function( pointerPosition ) {
this._handleScrolling = function( pointerPosition ) { if ( !this.options.scroll ) {
if ( !self.options.scroll ) {
return; return;
} }
if ( self.options.scrollSensitivity !== null ) { if ( this.options.scrollSensitivity !== null ) {
self.scrollSensitivity = self.options.scrollSensitivity; this.scrollSensitivity = this.options.scrollSensitivity;
} }
handleScroll.call( self, pointerPosition ); this._super( 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;
if ( !self.options.stack ) {
return; return;
} }
group = $.makeArray( $(stack) ).sort(function(a,b) { group = $.makeArray( $( stack ) ).sort(function( a, b ) {
var aZIndex = parseInt( $( a ).css( "zIndex" ), 10 ) || 0,
var aZIndex = parseInt( $(a).css("zIndex"), 10 ), bZIndex = parseInt( $( b ).css( "zIndex" ), 10 ) || 0;
bZIndex = parseInt( $(b).css("zIndex"), 10 ); return aZIndex - bZIndex;
return ( aZIndex || 0) - ( bZIndex|| 0);
}); });
if (!group.length) { if ( !group.length ) {
return; return;
} }
min = parseInt(group[0].style.zIndex, 10) || 0; min = parseInt( group[ 0 ].style.zIndex, 10 ) || 0;
$(group).each(function(i) { $( group ).each(function( i ) {
this.style.zIndex = min + i; this.style.zIndex = min + i;
}); });
self.element[0].style.zIndex = min + group.length; this.element.css( "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 ) {
if ( self.options.refreshPositions !== true ) {
return; return;
} }
drops.each( function() { drops.each(function() {
$(this).sortable("refreshPositions"); $( this ).sortable( "refreshPositions" );
}); });
}
}); });
} }
}); });