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

Author: tjvantoll

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-banner"></h2>
 <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>
 

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

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