Draggable: consider offsets from overflow:hidden parents

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

Fixes #10147

diff --git a/tests/unit/draggable/draggable_core.js b/tests/unit/draggable/draggable_core.js
index 8d611514fb27446efa70ea9b221077e738d5a5c3..93c6e4080d1b818557cd62c695a66470745545d0 100644 (file)
--- a/tests/unit/draggable/draggable_core.js
+++ b/tests/unit/draggable/draggable_core.js
@@ -185,38 +185,44 @@ test( "#5009: scroll not working with parent's position fixed", function() {
        });
 });
 
-test( "#9379: Draggable: position bug in scrollable div", function() {
-       expect( 2 );
-
-       $( "#qunit-fixture" ).html( "<div id='o_9379'><div id='i_9379'></div><div id='d_9379'>a</div></div>" );
-       $( "#i_9379" ).css({ position: "absolute", width: "500px", height: "500px" });
-       $( "#o_9379" ).css({ position: "absolute", width: "300px", height: "300px" });
-       $( "#d_9379" ).css({ width: "10px", height: "10px" });
-
-       var moves = 3,
-               startValue = 0,
-               dragDelta = 20,
-               delta = 100,
+$( [ "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 );
+
+               $( "#qunit-fixture" ).html( "<div id='outer'><div id='inner'></div><div id='dragged'>a</div></div>" );
+               $( "#inner" ).css({ position: "absolute", width: "500px", height: "500px" });
+               $( "#outer" ).css({ position: "absolute", width: "300px", height: "300px" });
+               $( "#dragged" ).css({ width: "10px", height: "10px" });
+
+               var moves = 3,
+                       startValue = 0,
+                       dragDelta = 20,
+                       delta = 100,
+
+                       // we scroll after each drag event, so subtract 1 from number of moves for expected
+                       expected = delta + ( ( moves - 1 ) * dragDelta ),
+                       element = $( "#dragged" ).draggable({
+                               drag: function() {
+                                       startValue += dragDelta;
+                                       $( "#outer" ).scrollTop( startValue ).scrollLeft( startValue );
+                               },
+                               stop: function( event, ui ) {
+                                       equal( ui.position.left, expected, "left position is correct when grandparent is scrolled" );
+                                       equal( ui.position.top, expected, "top position is correct when grandparent is scrolled" );
+                               }
+                       });
+
+               $( "#outer" ).css( "overflow", overflow );
 
-               // we scroll after each drag event, so subtract 1 from number of moves for expected
-               expected = delta + ( ( moves - 1 ) * dragDelta ),
-               element = $( "#d_9379" ).draggable({
-                       drag: function() {
-                               startValue += dragDelta;
-                               $( "#o_9379" ).scrollTop( startValue ).scrollLeft( startValue );
-                       },
-                       stop: function( event, ui ) {
-                               equal( ui.position.left, expected, "left position is correct when grandparent is scrolled" );
-                               equal( ui.position.top, expected, "top position is correct when grandparent is scrolled" );
-                       }
+               element.simulate( "drag", {
+                       dy: delta,
+                       dx: delta,
+                       moves: moves
                });
-
-       $( "#o_9379" ).css( "overflow", "auto" );
-
-       element.simulate( "drag", {
-               dy: delta,
-               dx: delta,
-               moves: moves
        });
 });
 

diff --git a/tests/unit/draggable/draggable_options.js b/tests/unit/draggable/draggable_options.js
index 1a9d7892562037f8e115e2d427d3eb5fb0fb8b43..a94452d9a2d93afc55bbb1297e5bdef543f2ab2e 100644 (file)
--- a/tests/unit/draggable/draggable_options.js
+++ b/tests/unit/draggable/draggable_options.js
@@ -361,7 +361,7 @@ test( "containment, account for border", function() {
        el.css({
                height: "5px",
                width: "5px"
-       }).draggable({ containment: "parent" });
+       }).draggable({ containment: "parent", scroll: false });
 
        el.simulate( "drag", {
                dx: 100,

diff --git a/ui/draggable.js b/ui/draggable.js
index 700bb66b3aefb24a3450eed5a3974042061ace66..0c57d801c9e8a55596d6fdcd8fd785d9b44b92d7 100644 (file)
--- a/ui/draggable.js
+++ b/ui/draggable.js
@@ -161,7 +161,7 @@ $.widget("ui.draggable", $.ui.mouse, {
 
                //Store the helper's 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.offsetParentCssPosition = this.offsetParent.css( "position" );