diff options
| -rw-r--r-- | tests/unit/draggable/draggable.html | 1 | ||||
| -rw-r--r-- | tests/unit/draggable/draggable_core.js | 35 | ||||
| -rw-r--r-- | ui/draggable.js | 15 |
3 files changed, 49 insertions, 2 deletions
diff --git a/tests/unit/draggable/draggable.html b/tests/unit/draggable/draggable.html index c4b769f5c..50e612206 100644 --- a/tests/unit/draggable/draggable.html +++ b/tests/unit/draggable/draggable.html @@ -82,6 +82,7 @@ <div id="main"> <div id="draggable1" style="background: green; width: 200px; height: 100px; position: relative; top: 0; left: 0;">Relative</div> <div id="draggable2" style="background: green; width: 200px; height: 100px; position: absolute; top: 10px; left: 10px;"><span><em>Absolute</em></span></div> + <div id="draggable3" style="background: green; position: absolute; right: 5px; bottom: 5px; padding: 7px; border: 3px solid black;"><span><em>Absolute right-bottom</em></span></div> <div id="droppable" style="background: green; width: 200px; height: 100px; position: absolute; top: 110px; left: 110px;"><span>Absolute</span></div> <div id="main-forceScrollable"></div> </div> diff --git a/tests/unit/draggable/draggable_core.js b/tests/unit/draggable/draggable_core.js index 3e8e7e0f5..8bc48f14c 100644 --- a/tests/unit/draggable/draggable_core.js +++ b/tests/unit/draggable/draggable_core.js @@ -25,6 +25,13 @@ test( "element types", function() { el.append("<tr><td>content</td></tr>"); } + // intrinsic height is incorrect in FF for buttons with no content + // https://bugzilla.mozilla.org/show_bug.cgi?id=471763 + // Support: FF + if ( typeName === "button" ) { + el.text( "button" ); + } + el.draggable({ cancel: "" }); offsetBefore = el.offset(); el.simulate( "drag", { @@ -35,8 +42,8 @@ test( "element types", function() { // Support: FF, Chrome, and IE9, // there are some rounding errors in so we can't say equal, we have to settle for close enough - closeEnough( offsetBefore.left, offsetAfter.left - 50, 1, "dragged[50, 50] " + "<" + typeName + ">" ); - closeEnough( offsetBefore.top, offsetAfter.top - 50, 1, "dragged[50, 50] " + "<" + typeName + ">" ); + closeEnough( offsetBefore.left, offsetAfter.left - 50, 1, "dragged[50, 50] " + "<" + typeName + "> left" ); + closeEnough( offsetBefore.top, offsetAfter.top - 50, 1, "dragged[50, 50] " + "<" + typeName + "> top" ); el.draggable("destroy"); el.remove(); }); @@ -317,4 +324,28 @@ test( "ui-draggable-handle managed correctly in nested draggables", function() { ok( child.hasClass( "ui-draggable-handle" ), "child retains class name on destroy" ); }); +// http://bugs.jqueryui.com/ticket/7772 +// when css 'right' is set, element resizes on drag +test( "setting right/bottom css shouldn't cause resize", function() { + expect( 3 ); + + var finalOffset, + element = $( "#draggable3" ), + origWidth = element.width(), + origHeight = element.height(), + origOffset = element.offset(); + + element.draggable(); + + TestHelpers.draggable.move( element, -50, -50 ); + + finalOffset = element.offset(); + finalOffset.left += 50; + finalOffset.top += 50; + + equal( element.width(), origWidth, "element retains width" ); + equal( element.height(), origHeight, "element retains height" ); + deepEqual( finalOffset, origOffset, "element moves the correct distance" ); +}); + })( jQuery ); diff --git a/ui/draggable.js b/ui/draggable.js index 68222b0d5..826098feb 100644 --- a/ui/draggable.js +++ b/ui/draggable.js @@ -220,6 +220,10 @@ $.widget("ui.draggable", $.ui.mouse, { $.ui.ddmanager.prepareOffsets(this, event); } + // Reset helper's right/bottom css if they're set and set explicit width/height instead + // as this prevents resizing of elements with right/bottom set (see #7772) + this._normalizeRightBottom(); + this._mouseDrag(event, true); //Execute the drag once - this causes the helper not to be visible before getting its correct position //If the ddmanager is used for droppables, inform the manager that dragging has started (see #5003) @@ -632,6 +636,17 @@ $.widget("ui.draggable", $.ui.mouse, { } }, + _normalizeRightBottom: function() { + if ( this.options.axis !== "y" && this.helper.css( "right" ) !== "auto" ) { + this.helper.width( this.helper.width() ); + this.helper.css( "right", "auto" ); + } + if ( this.options.axis !== "x" && this.helper.css( "bottom" ) !== "auto" ) { + this.helper.height( this.helper.height() ); + this.helper.css( "bottom", "auto" ); + } + }, + // From now on bulk stuff - mainly helpers _trigger: function( type, event, ui ) { |