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

Resizable: Remove bad workaround for draggable+resizable

Browse Source 
This adds a compound test page for draggable+resizable, which had no coverage
before. Using that page shows that there is no way to reproduce the behaviour
described in the original ticket that caused this workaround, since its not
possible to resize an element beyond the window boundaries. Therefore removing
the workaround, which is 6+ years old and has no test coverage, seems like the
sanest approach.

Fixes #6939
Closes gh-1210
This commit is contained in:
Jörn Zaefferer 2014-03-11 11:50:12 +01:00
parent 919d9185f2
commit 3576ceb360
4 changed files with 58 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
tests/unit/resizable/resizable_core.js
View File

@ -171,13 +171,14 @@ test("handle with complex markup (#8756)", function() {
}); });
test("resizable accounts for scroll position correctly (#3815)", function() { test("resizable accounts for scroll position correctly (#3815)", function() {
expect( 3 ); expect( 4 );
var position, top, left, var position, top, left,
container = $("<div style='overflow:scroll;height:300px;width:300px;position:relative;'></div>").appendTo("#qunit-fixture"), container = $("<div style='overflow:scroll;height:300px;width:300px;position:relative;'></div>").appendTo("#qunit-fixture"),
overflowed = $("<div style='width: 1000px; height: 1000px;'></div>").appendTo( container ), overflowed = $("<div style='width: 1000px; height: 1000px;'></div>").appendTo( container ),
el = $("<div style='height:100px;width:100px;position:absolute;top:10px;left:10px;'></div>").appendTo( overflowed ).resizable({ handles: "all" }), el = $("<div style='height:100px;width:100px;position:absolute;top:10px;left:10px;'></div>").appendTo( overflowed ).resizable({ handles: "all" }),
handle = ".ui-resizable-e"; handle = ".ui-resizable-e",
handlePosition = $(handle).position().left;
container.scrollLeft( 100 ).scrollTop( 100 ); container.scrollLeft( 100 ).scrollTop( 100 );
@ -189,6 +190,7 @@ test("resizable accounts for scroll position correctly (#3815)", function() {
deepEqual( el.position(), position, "position stays the same when resized" ); deepEqual( el.position(), position, "position stays the same when resized" );
equal( el.css("left"), left, "css('left') stays the same when resized" ); equal( el.css("left"), left, "css('left') stays the same when resized" );
equal( el.css("top"), top, "css('top') stays the same when resized" ); equal( el.css("top"), top, "css('top') stays the same when resized" );
equal( $(handle).position().left, handlePosition + 50, "handle also moved" );
}); });
test( "resizable stores correct size when using helper and grid (#9547)", function() { test( "resizable stores correct size when using helper and grid (#9547)", function() {
@ -208,7 +210,7 @@ test( "resizable stores correct size when using helper and grid (#9547)", functi
test( "nested resizable", function() { test( "nested resizable", function() {
expect( 4 ); expect( 4 );
var outer = $( "<div id='outer' style='width:50px'></div>" ), var outer = $( "<div id='outer' style='width:50px'></div>" ),
inner = $( "<div id='inner' style='width:30px'></div>" ), inner = $( "<div id='inner' style='width:30px'></div>" ),
target = $( "#resizable1" ), target = $( "#resizable1" ),
@ -224,7 +226,7 @@ test( "nested resizable", function() {
innerHandle = $( "#inner > .ui-resizable-e" ); innerHandle = $( "#inner > .ui-resizable-e" );
outerHandle = $( "#outer > .ui-resizable-e" ); outerHandle = $( "#outer > .ui-resizable-e" );
TestHelpers.resizable.drag( innerHandle, 10 ); TestHelpers.resizable.drag( innerHandle, 10 );
equal( inner.width(), 40, "compare width of inner element" ); equal( inner.width(), 40, "compare width of inner element" );
TestHelpers.resizable.drag( innerHandle, -10 ); TestHelpers.resizable.drag( innerHandle, -10 );

51
tests/visual/compound/draggable_resizable.html Normal file
View File

@ -0,0 +1,51 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Compound Visual Test: Draggable and Resizable block element</title>
<link rel="stylesheet" href="../visual.css">
<link rel="stylesheet" href="../../../themes/base/all.css">
<script src="../../../jquery.js"></script>
<script src="../../../ui/core.js"></script>
<script src="../../../ui/widget.js"></script>
<script src="../../../ui/mouse.js"></script>
<script src="../../../ui/draggable.js"></script>
<script src="../../../ui/resizable.js"></script>
<style>
.draggable {
margin: 0.5em;
padding: 0.5em;
}
.absolute {
color: red;
position: absolute !important;
}
</style>
<script>
$(function() {
$( ".draggable" )
.addClass( "ui-widget ui-widget-header ui-corner-all" )
.draggable({
revert: "invalid"
})
.resizable({
minHeight: 13,
handles: "s"
});
$( ".draggable:last" ).addClass( "absolute" );
});
</script>
</head>
<body>
<p>WHAT: Three draggable and resizable elements, with only a bottom handle. Last one (red color) is absolutely positioned.</p>
<p>EXPECTED: Each element can be dragged and resized. The first two stay with their relative positioning (induced by draggable). The last one can be resized despite the absolute positioning.</p>
<div id="first">
<div class="draggable">Draggable 1-1</div>
<div class="draggable">Draggable 1-2</div>
<div class="draggable">Draggable 1-3</div>
</div>
</body>
</html>

1
tests/visual/index.html
View File

@ -75,6 +75,7 @@
<li><a href="compound/dialog_widgets.html">Various Widgets in Dialog</a></li> <li><a href="compound/dialog_widgets.html">Various Widgets in Dialog</a></li>
<li><a href="compound/draggable_accordion.html">Draggable Accordion</a></li> <li><a href="compound/draggable_accordion.html">Draggable Accordion</a></li>
<li><a href="compound/draggable_accordion_accordion_tabs_draggable.html">Nested Widgets</a></li> <li><a href="compound/draggable_accordion_accordion_tabs_draggable.html">Nested Widgets</a></li>
<li><a href="compound/draggable_resizable.html">Draggable Resizable</a></li>
<li><a href="compound/sortable_accordion_sortable_tabs.html">Sortable Tabs in Sortable Accordion</a></li> <li><a href="compound/sortable_accordion_sortable_tabs.html">Sortable Tabs in Sortable Accordion</a></li>
<li><a href="compound/tabs_tabs.html">Nested Tabs</a></li> <li><a href="compound/tabs_tabs.html">Nested Tabs</a></li>
<li><a href="compound/tabs_tooltips.html">Tabs with Tooltips</a></li> <li><a href="compound/tabs_tooltips.html">Tabs with Tooltips</a></li>

8
ui/resizable.js
View File

@ -287,18 +287,10 @@ $.widget("ui.resizable", $.ui.mouse, {
var curleft, curtop, cursor, var curleft, curtop, cursor,
o = this.options, o = this.options,
iniPos = this.element.position(),
el = this.element; el = this.element;
this.resizing = true; this.resizing = true;
// Bugfix for http://bugs.jqueryui.com/ticket/1749
if ( (/absolute/).test( el.css("position") ) ) {
el.css({ position: "absolute", top: el.css("top"), left: el.css("left") });
} else if (el.is(".ui-draggable")) {
el.css({ position: "absolute", top: iniPos.top, left: iniPos.left });
}
this._renderProxy(); this._renderProxy();
curleft = this._num(this.helper.css("left")); curleft = this._num(this.helper.css("left"));