Draggable: Account for z-index set in CSS for the stack option. Fixed #9077 - Dragga...

diff --git a/tests/unit/draggable/draggable.html b/tests/unit/draggable/draggable.html
index cd068eb2086c69e4ac38a91bce3efc694c69b886..50bed8caf397e53e16e5b008d9025514800d332d 100644 (file)
--- a/tests/unit/draggable/draggable.html
+++ b/tests/unit/draggable/draggable.html
@@ -6,6 +6,12 @@
 
        <script src="../../jquery.js"></script>
        <link rel="stylesheet" href="../../../external/qunit.css">
+       
+       <style>
+               /* See #9077 */
+               #draggable3, #draggable4 { z-index: 100; }
+       </style>
+       
        <script src="../../../external/qunit.js"></script>
        <script src="../../jquery.simulate.js"></script>
        <script src="../testsuite.js"></script>
@@ -39,13 +45,14 @@
 <h2 id="qunit-userAgent"></h2>
 <ol id="qunit-tests"></ol>
 <div id="qunit-fixture">
-
 <div id="main"></div>
 
 <div id="draggable1" style="background: green; width: 200px; height: 100px;">Relative</div>
 <div id="draggable2" style="background: green; width: 200px; height: 100px; position: absolute; top: 10px; left: 10px;"><span>Absolute</span></div>
 <div style='width: 1px; height: 1000px;'></div>
 <div style="position: absolute; width: 1px; height: 2000px;"></div>
+<div id="draggable3"></div>
+<div id="draggable4"></div>
 
 </div>
 

diff --git a/tests/unit/draggable/draggable_options.js b/tests/unit/draggable/draggable_options.js
index a3f7169f2b842ffa147025099b11ef0e92890cee..8496d6182ea38ccb18b0f1fa2cd14382996f1b34 100644 (file)
--- a/tests/unit/draggable/draggable_options.js
+++ b/tests/unit/draggable/draggable_options.js
@@ -723,4 +723,39 @@ test("{ zIndex: 10 }", function() {
 
 });
 
+test( "{ stack }", function() {
+       expect( 4 );
+
+       var draggable1 = $( "#draggable1" ),
+               draggable2 = $( "#draggable2" ),
+               draggable3 = $( "#draggable3" ),
+               draggable4 = $( "#draggable4" );
+
+       // Set z-index as an inline style.
+       $( "#draggable1, #draggable2" )
+               .css( "zIndex", 100 )
+               .draggable({
+                       stack: "#draggable1, #draggable2"
+               });
+       // Have z-index applied via CSS, see #9077
+       $( "#draggable3, #draggable4" )
+               .draggable({
+                       stack: "#draggable3, #draggable4"
+               });
+
+       draggable1.simulate( "drag", {
+               dx: 1,
+               dy: 1
+       });
+       draggable3.simulate( "drag", {
+               dx: 1,
+               dy: 1
+       });
+
+       equal( draggable1.css( "zIndex" ), 102);
+       equal( draggable2.css( "zIndex" ), 101);
+       equal( draggable3.css( "zIndex" ), 102);
+       equal( draggable4.css( "zIndex" ), 101);
+});
+
 })(jQuery);

diff --git a/ui/jquery.ui.draggable.js b/ui/jquery.ui.draggable.js
index 9a31add7c5e6592b543eddfe3ea1392bfd0966a1..b8d21bd80a1f47cfa57bb2df3259996aa16fc632 100644 (file)
--- a/ui/jquery.ui.draggable.js
+++ b/ui/jquery.ui.draggable.js
@@ -917,13 +917,12 @@ $.ui.plugin.add("draggable", "stack", {
 
                if (!group.length) { return; }
 
-               min = parseInt(group[0].style.zIndex, 10) || 0;
+               min = parseInt($(group[0]).css("zIndex"), 10) || 0;
                $(group).each(function(i) {
-                       this.style.zIndex = min + i;
+                       $(this).css("zIndex", min + i);
                });
 
-               this[0].style.zIndex = min + group.length;
-
+               $(this[0]).css("zIndex", (min + group.length));
        }
 });