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

Draggable: consider offsets from overflow:hidden parents

Browse Source 
Developers can programmatically set scrollTop/Left on
draggable containers that are overflow:hidden. They must
be considered for positioning.

Fixes #10147
This commit is contained in:
Mike Sherov 2014-08-09 23:00:58 -04:00
parent 67e4b44b29
commit e9efbc2221
3 changed files with 36 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -185,13 +185,18 @@ test( "#5009: scroll not working with parent's position fixed", function() {
}); });
}); });
test( "#9379: Draggable: position bug in scrollable div", function() { $( [ "hidden", "auto", "scroll" ] ).each(function() {
var overflow = this;
// http://bugs.jqueryui.com/ticket/9379 - position bug in scrollable div
// http://bugs.jqueryui.com/ticket/10147 - Wrong position in a parent with "overflow: hidden"
test( "position in scrollable parent with overflow: " + overflow, function() {
expect( 2 ); expect( 2 );
$( "#qunit-fixture" ).html( "<div id='o_9379'><div id='i_9379'></div><div id='d_9379'>a</div></div>" ); $( "#qunit-fixture" ).html( "<div id='outer'><div id='inner'></div><div id='dragged'>a</div></div>" );
$( "#i_9379" ).css({ position: "absolute", width: "500px", height: "500px" }); $( "#inner" ).css({ position: "absolute", width: "500px", height: "500px" });
$( "#o_9379" ).css({ position: "absolute", width: "300px", height: "300px" }); $( "#outer" ).css({ position: "absolute", width: "300px", height: "300px" });
$( "#d_9379" ).css({ width: "10px", height: "10px" }); $( "#dragged" ).css({ width: "10px", height: "10px" });
var moves = 3, var moves = 3,
startValue = 0, startValue = 0,
@ -200,10 +205,10 @@ test( "#9379: Draggable: position bug in scrollable div", function() {
// we scroll after each drag event, so subtract 1 from number of moves for expected // we scroll after each drag event, so subtract 1 from number of moves for expected
expected = delta + ( ( moves - 1 ) * dragDelta ), expected = delta + ( ( moves - 1 ) * dragDelta ),
element = $( "#d_9379" ).draggable({ element = $( "#dragged" ).draggable({
drag: function() { drag: function() {
startValue += dragDelta; startValue += dragDelta;
$( "#o_9379" ).scrollTop( startValue ).scrollLeft( startValue ); $( "#outer" ).scrollTop( startValue ).scrollLeft( startValue );
}, },
stop: function( event, ui ) { stop: function( event, ui ) {
equal( ui.position.left, expected, "left position is correct when grandparent is scrolled" ); equal( ui.position.left, expected, "left position is correct when grandparent is scrolled" );
@ -211,13 +216,14 @@ test( "#9379: Draggable: position bug in scrollable div", function() {
} }
}); });
$( "#o_9379" ).css( "overflow", "auto" ); $( "#outer" ).css( "overflow", overflow );
element.simulate( "drag", { element.simulate( "drag", {
dy: delta, dy: delta,
dx: delta, dx: delta,
moves: moves moves: moves
}); });
});
}); });
test( "#5727: draggable from iframe", function() { test( "#5727: draggable from iframe", function() {

2
tests/unit/draggable/draggable_options.js
View File

@ -361,7 +361,7 @@ test( "containment, account for border", function() {
el.css({ el.css({
height: "5px", height: "5px",
width: "5px" width: "5px"
}).draggable({ containment: "parent" }); }).draggable({ containment: "parent", scroll: false });
el.simulate( "drag", { el.simulate( "drag", {
dx: 100, dx: 100,

2
ui/draggable.js
View File

@ -161,7 +161,7 @@ $.widget("ui.draggable", $.ui.mouse, {
//Store the helper's css position //Store the helper's css position
this.cssPosition = this.helper.css( "position" ); this.cssPosition = this.helper.css( "position" );
this.scrollParent = this.helper.scrollParent(); this.scrollParent = this.helper.scrollParent( true );
this.offsetParent = this.helper.offsetParent(); this.offsetParent = this.helper.offsetParent();
this.offsetParentCssPosition = this.offsetParent.css( "position" ); this.offsetParentCssPosition = this.offsetParent.css( "position" );