library-mirrors/jquery-ui
1
0
Fork 0
mirror of https://github.com/jquery/jquery-ui.git synced 2025-01-07 20:34:24 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Droppable: Defer querying of offsetWidth and offsetHeight until they're required. Fixes #9339 - Droppable: offsetWidth and offsetHeight are queried unnecessarily causing synchronous reflow.

Browse Source
This commit is contained in:
Steven Luscher 2013-05-10 14:03:44 -07:00 committed by Mike Sherov
parent 6df5c1a4ae
commit a4fc7a9e96
1 changed files with 28 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
ui/jquery.ui.droppable.js vendored
View File

@ -41,7 +41,8 @@ $.widget("ui.droppable", {
}, },
_create: function() { _create: function() {
var o = this.options, var proportions,
o = this.options,
accept = o.accept; accept = o.accept;
this.isover = false; this.isover = false;
@ -51,8 +52,20 @@ $.widget("ui.droppable", {
return d.is(accept); return d.is(accept);
}; };
//Store the droppable's proportions this.proportions = function( /* valueToWrite */ ) {
this.proportions = { width: this.element[0].offsetWidth, height: this.element[0].offsetHeight }; if ( arguments.length ) {
// Store the droppable's proportions
proportions = arguments[ 0 ];
} else {
// Retrieve or derive the droppable's proportions
return proportions ?
proportions :
proportions = {
width: this.element[ 0 ].offsetWidth,
height: this.element[ 0 ].offsetHeight
};
}
};
// Add the reference and positions to the manager // Add the reference and positions to the manager
$.ui.ddmanager.droppables[o.scope] = $.ui.ddmanager.droppables[o.scope] || []; $.ui.ddmanager.droppables[o.scope] = $.ui.ddmanager.droppables[o.scope] || [];
@ -198,10 +211,14 @@ $.ui.intersect = function(draggable, droppable, toleranceMode) {
} }
var draggableLeft, draggableTop, var draggableLeft, draggableTop,
x1 = (draggable.positionAbs || draggable.position.absolute).left, x2 = x1 + draggable.helperProportions.width, x1 = (draggable.positionAbs || draggable.position.absolute).left,
y1 = (draggable.positionAbs || draggable.position.absolute).top, y2 = y1 + draggable.helperProportions.height, y1 = (draggable.positionAbs || draggable.position.absolute).top,
l = droppable.offset.left, r = l + droppable.proportions.width, x2 = x1 + draggable.helperProportions.width,
t = droppable.offset.top, b = t + droppable.proportions.height; y2 = y1 + draggable.helperProportions.height,
l = droppable.offset.left,
t = droppable.offset.top,
r = l + droppable.proportions().width,
b = t + droppable.proportions().height;
switch (toleranceMode) { switch (toleranceMode) {
case "fit": case "fit":
@ -214,7 +231,7 @@ $.ui.intersect = function(draggable, droppable, toleranceMode) {
case "pointer": case "pointer":
draggableLeft = ((draggable.positionAbs || draggable.position.absolute).left + (draggable.clickOffset || draggable.offset.click).left); draggableLeft = ((draggable.positionAbs || draggable.position.absolute).left + (draggable.clickOffset || draggable.offset.click).left);
draggableTop = ((draggable.positionAbs || draggable.position.absolute).top + (draggable.clickOffset || draggable.offset.click).top); draggableTop = ((draggable.positionAbs || draggable.position.absolute).top + (draggable.clickOffset || draggable.offset.click).top);
return isOverAxis( draggableTop, t, droppable.proportions.height ) && isOverAxis( draggableLeft, l, droppable.proportions.width ); return isOverAxis( draggableTop, t, droppable.proportions().height ) && isOverAxis( draggableLeft, l, droppable.proportions().width );
case "touch": case "touch":
return ( return (
(y1 >= t && y1 <= b) || // Top edge touching (y1 >= t && y1 <= b) || // Top edge touching
@ -254,7 +271,7 @@ $.ui.ddmanager = {
// Filter out elements in the current dragged item // Filter out elements in the current dragged item
for (j=0; j < list.length; j++) { for (j=0; j < list.length; j++) {
if(list[j] === m[i].element[0]) { if(list[j] === m[i].element[0]) {
m[i].proportions.height = 0; m[i].proportions().height = 0;
continue droppablesLoop; continue droppablesLoop;
} }
} }
@ -269,8 +286,8 @@ $.ui.ddmanager = {
m[i]._activate.call(m[i], event); m[i]._activate.call(m[i], event);
} }
m[i].offset = m[i].element.offset(); m[ i ].offset = m[ i ].element.offset();
m[i].proportions = { width: m[i].element[0].offsetWidth, height: m[i].element[0].offsetHeight }; m[ i ].proportions({ width: m[ i ].element[ 0 ].offsetWidth, height: m[ i ].element[ 0 ].offsetHeight });
} }