Skip to content

Commit 2d7e150

Browse files
scottgonzalezscottgonzalez
committed
Draggable: Cleanup.
1 parent 515e20d commit 2d7e150

File tree

1 file changed

+64
-59
lines changed

1 file changed

+64
-59
lines changed

‎ui/jquery.ui.draggable.js

Lines changed: 64 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
*/
1616
(function( $, undefined ) {
1717

18-
// create a shallow copy of an object
18+
// Create a shallow copy of an object
1919
function copy( obj ) {
2020
var prop,
2121
ret = {};
@@ -57,12 +57,12 @@ $.widget( "ui.draggable", $.ui.interaction, {
5757
// appendTo option without a helper
5858
// dragDimensions: saved off width and height used for various options
5959

60+
scrollSensitivity: 20,
61+
scrollSpeed: 5,
62+
6063
_create: function() {
6164
this._super();
6265

63-
this.scrollSensitivity = 20;
64-
this.scrollSpeed = 5;
65-
6666
// Static position elements can't be moved with top/left
6767
if ( this.element.css( "position" ) === "static" ) {
6868
this.element.css( "position", "relative" );
@@ -74,11 +74,14 @@ $.widget( "ui.draggable", $.ui.interaction, {
7474
/** interaction interface **/
7575

7676
_isValidTarget: function( element ) {
77-
var handle = this.options.handle ? element.is( this.element.find( this.options.handle ) ) : true,
78-
exclude = this.options.exclude ? element.is( this.element.find( this.options.exclude ) ) : false;
79-
80-
// Enforce boolean
81-
return !!( handle && !exclude );
77+
var handle = this.options.handle ?
78+
element.is( this.element.find( this.options.handle ) ) :
79+
true,
80+
exclude = this.options.exclude ?
81+
element.is( this.element.find( this.options.exclude ) ) :
82+
false;
83+
84+
return handle && !exclude;
8285
},
8386

8487
_start: function( event, pointerPosition ) {
@@ -88,7 +91,7 @@ $.widget( "ui.draggable", $.ui.interaction, {
8891
this.dragDimensions = null;
8992

9093
// The actual dragging element, should always be a jQuery object
91-
this.dragEl = ( this.options.helper === true || typeof this.options.helper === "function" ) ?
94+
this.dragEl = ( this.options.helper === true || $.isFunction( this.options.helper ) ) ?
9295
this._createHelper( pointerPosition ) :
9396
this.element;
9497

@@ -101,7 +104,7 @@ $.widget( "ui.draggable", $.ui.interaction, {
101104
};
102105
offset = this.dragEl.offset();
103106
this.dragEl
104-
.appendTo( this._appendToEl() )
107+
.appendTo( this._appendTo() )
105108
.offset( offset );
106109
}
107110

@@ -113,7 +116,7 @@ $.widget( "ui.draggable", $.ui.interaction, {
113116
this.originalOffset = this.startOffset = this.dragEl.offset();
114117
this.originalPointer = pointerPosition;
115118

116-
// If not already cached within _createHelper
119+
// If not already cached within _createHelper()
117120
if ( !this.dragDimensions ) {
118121
this._cacheDragDimensions( this.dragEl );
119122
}
@@ -122,15 +125,16 @@ $.widget( "ui.draggable", $.ui.interaction, {
122125
this.position = copy( this.startPosition );
123126
this.offset = copy( this.startOffset );
124127

125-
// Cache the offset of scrollParent, if required for _handleScrolling
126-
if ( this.scrollParent[0] !== this.document[0] && this.scrollParent[0].tagName !== "HTML" ) {
128+
// Cache the offset of scrollParent, if required for _handleScrolling()
129+
if ( this.scrollParent[ 0 ] !== this.document[ 0 ] &&
130+
this.scrollParent[ 0 ].tagName.toUpperCase() !== "HTML" ) {
127131
this.overflowOffset = this.scrollParent.offset();
128132
}
129133

130134
this.overflow = {
131-
height: this.scrollParent[0] === this.document[0] ?
135+
height: this.scrollParent[ 0 ] === this.document[ 0 ] ?
132136
this.window.height() : this.scrollParent.height(),
133-
width: this.scrollParent[0] === this.document[0] ?
137+
width: this.scrollParent[ 0 ] === this.document[ 0 ] ?
134138
this.window.width() : this.scrollParent.width()
135139
};
136140

@@ -140,15 +144,15 @@ $.widget( "ui.draggable", $.ui.interaction, {
140144
if ( this._trigger( "beforeStart", event,
141145
this._originalHash( pointerPosition ) ) === false ) {
142146

143-
// domPosition needs to be undone even if beforeStart is stopped
144-
// Otherwise this.dragEl will remain in the element appendTo is set to
147+
// domPosition needs to be undone even if beforeStart is stopped,
148+
// otherwise this.dragEl will remain in the `appendTo` element
145149
this._resetDomPosition();
146150
return false;
147151
}
148152

149-
// Save off the usual properties locally, so they can be reverted from start
150-
startCssLeft = this.dragEl.css("left");
151-
startCssTop = this.dragEl.css("top");
153+
// Save off the usual properties locally, so they can be reverted
154+
startCssLeft = this.dragEl.css( "left" );
155+
startCssTop = this.dragEl.css( "top" );
152156
startPosition = copy( this._getPosition() );
153157
startOffset = copy( this.offset );
154158

@@ -159,9 +163,9 @@ $.widget( "ui.draggable", $.ui.interaction, {
159163
// If user cancels on start, don't allow dragging
160164
if ( this._trigger( "start", event,
161165
this._fullHash( pointerPosition ) ) === false ) {
162-
// domPosition needs to be undone even if start is stopped
163-
// Otherwise this.dragEl will remain in the element appendTo is set to
164166

167+
// domPosition needs to be undone even if start is stopped,
168+
// otherwise this.dragEl will remain in the `appendTo` element
165169
this.startPosition = startPosition;
166170
this.startOffset = startOffset;
167171
this.dragEl.css({
@@ -172,6 +176,7 @@ $.widget( "ui.draggable", $.ui.interaction, {
172176
this._resetDomPosition();
173177
return false;
174178
}
179+
175180
this._blockFrames();
176181
},
177182

@@ -197,7 +202,8 @@ $.widget( "ui.draggable", $.ui.interaction, {
197202
this._preparePosition( pointerPosition );
198203

199204
// If user cancels drag, don't move the element
200-
if ( this._trigger( "drag", event, this._fullHash( pointerPosition ) ) === false ) {
205+
if ( this._trigger( "drag", event,
206+
this._fullHash( pointerPosition ) ) === false ) {
201207
return false;
202208
}
203209

@@ -211,9 +217,10 @@ $.widget( "ui.draggable", $.ui.interaction, {
211217
this._preparePosition( pointerPosition );
212218

213219
// If user cancels stop, leave helper there
214-
if ( this._trigger( "stop", event, this._fullHash( pointerPosition ) ) !== false ) {
220+
if ( this._trigger( "stop", event,
221+
this._fullHash( pointerPosition ) ) !== false ) {
215222
if ( this.options.helper ) {
216-
delete this.element.data( "ui-draggable" ).helper;
223+
delete this.helper;
217224
this.dragEl.remove();
218225
}
219226
this._resetDomPosition();
@@ -225,33 +232,30 @@ $.widget( "ui.draggable", $.ui.interaction, {
225232
/** internal **/
226233

227234
_createHelper: function( pointerPosition ) {
228-
var helper,
229-
offset = this.element.offset(),
235+
var offset = this.element.offset(),
230236
xPos = (pointerPosition.x - offset.left) / this.element.outerWidth(),
231237
yPos = (pointerPosition.y - offset.top) / this.element.outerHeight();
232238

233-
// clone
239+
// Clone
234240
if ( this.options.helper === true ) {
235-
helper = this.element.clone()
241+
this.helper = this.element.clone()
236242
.removeAttr( "id" )
237243
.find( "[id]" )
238244
.removeAttr( "id" )
239245
.end();
240246
} else {
241247
// TODO: figure out the signature for this; see #4957
242-
helper = $( this.options.helper() );
248+
this.helper = $( this.options.helper() );
243249
}
244250

245251
// Ensure the helper is in the DOM; obey the appendTo option if it exists
246-
if ( this.options.appendTo || !helper.closest( "body" ).length ) {
247-
helper.appendTo( this._appendToEl() || this.document[0].body );
252+
if ( this.options.appendTo || !this.helper.closest( "body" ).length ) {
253+
this.helper.appendTo( this._appendTo() || this.document[ 0 ].body );
248254
}
249255

250-
this.element.data( "ui-draggable" ).helper = helper;
251-
252-
this._cacheDragDimensions( helper );
256+
this._cacheDragDimensions( this.helper );
253257

254-
return helper
258+
return this.helper
255259
// Helper must be absolute to function properly
256260
.css( "position", "absolute" )
257261
.offset({
@@ -260,15 +264,15 @@ $.widget( "ui.draggable", $.ui.interaction, {
260264
});
261265
},
262266

263-
_cacheDragDimensions: function( el) {
267+
_cacheDragDimensions: function( element ) {
264268
this.dragDimensions = {
265-
width: el.outerWidth(),
266-
height: el.outerHeight()
269+
width: element.outerWidth(),
270+
height: element.outerHeight()
267271
};
268272
},
269273

270274
// TODO: Remove after 2.0, only used for backCompat
271-
_appendToEl: function() {
275+
_appendTo: function() {
272276
return this.options.appendTo;
273277
},
274278

@@ -288,11 +292,12 @@ $.widget( "ui.draggable", $.ui.interaction, {
288292
return position;
289293
}
290294

291-
// When using relative, css values are checked
292-
// Otherwise the position wouldn't account for padding on ancestors
295+
// When using relative, css values are checked,
296+
// otherwise the position wouldn't account for padding on ancestors
293297
left = this.dragEl.css( "left" );
294298
top = this.dragEl.css( "top" );
295299

300+
// TODO: add proper support comment
296301
// Webkit will give back auto if there is no explicit value
297302
left = ( left === "auto" ) ? 0: parseInt( left, 10 );
298303
top = ( top === "auto" ) ? 0: parseInt( top, 10 );
@@ -321,7 +326,7 @@ $.widget( "ui.draggable", $.ui.interaction, {
321326
yBottom = this.overflow.height + overflowTop - pointerPosition.y,
322327
yTop = pointerPosition.y - overflowTop,
323328

324-
// accounts for change in scrollbar to modify "original" pointer so calc
329+
// Accounts for change in scrollbar to modify "original" pointer
325330
change;
326331

327332
// Handle vertical scrolling
@@ -362,7 +367,8 @@ $.widget( "ui.draggable", $.ui.interaction, {
362367
return this.scrollSpeed + Math.round( distance / 2 );
363368
},
364369

365-
// Uses event to determine new position of draggable, before any override from callbacks
370+
// Uses event to determine new position of draggable, before any override
371+
// from callbacks
366372
// TODO: handle absolute element inside relative parent like a relative element
367373
_preparePosition: function( pointerPosition ) {
368374
var leftDiff = pointerPosition.x - this.originalPointer.x,
@@ -387,14 +393,15 @@ $.widget( "ui.draggable", $.ui.interaction, {
387393
this.offset.top = this.startOffset.top + topDiff;
388394
},
389395

390-
// Places draggable where event, or user via event/callback, indicates
396+
// Places draggable where event indicates
391397
_setCss: function() {
392398
var newLeft = this.position.left,
393399
newTop = this.position.top;
394400

395401
// User overriding left/top so shortcut math is no longer valid
396402
if ( this.tempPosition.left !== this.position.left ||
397403
this.tempPosition.top !== this.position.top ) {
404+
398405
// Reset offset based on difference of expected and overridden values
399406
this.offset.left += newLeft - this.tempPosition.left;
400407
this.offset.top += newTop - this.tempPosition.top;
@@ -445,7 +452,7 @@ $.widget( "ui.draggable", $.ui.interaction, {
445452
height: iframe.outerHeight()
446453
})
447454
.appendTo( iframe.parent() )
448-
.offset( iframe.offset() )[0];
455+
.offset( iframe.offset() )[ 0 ];
449456
});
450457
},
451458

@@ -462,12 +469,8 @@ $.widget( "ui.draggable", $.ui.interaction, {
462469
}
463470
});
464471

472+
// Add containment option via extension
465473
$.widget( "ui.draggable", $.ui.draggable, {
466-
467-
// $.widget doesn't know how to handle redefinitions with a custom prefix
468-
// custom prefixes are going away anyway, so it's not worth fixing right now
469-
widgetEventPrefix: "drag",
470-
471474
options: {
472475
containment: null
473476
},
@@ -492,11 +495,11 @@ $.widget( "ui.draggable", $.ui.draggable, {
492495
if ( $.isArray( container ) ) {
493496
offset = container.offset();
494497
left = offset.left +
495-
(parseFloat( $.css( container[0], "borderLeftWidth", true ) ) || 0) +
496-
(parseFloat( $.css( container[0], "paddingLeft", true ) ) || 0);
498+
(parseFloat( $.css( container[ 0 ], "borderLeftWidth", true ) ) || 0) +
499+
(parseFloat( $.css( container[ 0 ], "paddingLeft", true ) ) || 0);
497500
top = offset.top +
498-
(parseFloat( $.css( container[0], "borderTopWidth", true ) ) || 0) +
499-
(parseFloat( $.css( container[0], "paddingTop", true ) ) || 0);
501+
(parseFloat( $.css( container[ 0 ], "borderTopWidth", true ) ) || 0) +
502+
(parseFloat( $.css( container[ 0 ], "paddingTop", true ) ) || 0);
500503
right = left + container.width();
501504
bottom = top + container.height();
502505
} else {
@@ -555,7 +558,7 @@ $.widget( "ui.draggable", $.ui.draggable, {
555558
}
556559
});
557560

558-
})( jQuery );
561+
559562

560563
// DEPRECATED
561564
if ( $.uiBackCompat !== false ) {
@@ -564,7 +567,7 @@ if ( $.uiBackCompat !== false ) {
564567
$.widget( "ui.draggable", $.ui.draggable, {
565568

566569
// Helper passed in since _createHelper calls this before dragEl is set
567-
_appendToEl: function() {
570+
_appendTo: function() {
568571
var el = this.options.appendTo;
569572

570573
// This should only happen via _createHelper
@@ -949,7 +952,7 @@ if ( $.uiBackCompat !== false ) {
949952
scrollSpeed: 20,
950953
scrollSensitivity: 20
951954
},
952-
_create : function() {
955+
_create: function() {
953956
var self = this,
954957
handleScroll = this._handleScrolling,
955958
speed = this._speed;
@@ -1260,3 +1263,5 @@ if ( $.uiBackCompat !== false ) {
12601263
}
12611264
});
12621265
}
1266+
1267+
})( jQuery );

0 commit comments

Comments
 (0)