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: Set explicit width/height instead of right/bottom css.

Browse Source 
Fixes #7772
This commit is contained in:
Uri Gilad 2013-03-29 03:03:14 +03:00 committed by Mike Sherov
parent 48ea2aadad
commit 8eca7b8f45
3 changed files with 49 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
tests/unit/draggable/draggable.html
View File

@ -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>

35
tests/unit/draggable/draggable_core.js
View File

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

15
ui/draggable.js
View File

@ -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 ) {