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

This commit is contained in:
TJ VanToll 2013-02-11 23:29:48 -05:00
parent ab408c9b82
commit c32bebd1bd
3 changed files with 46 additions and 5 deletions

View File

@ -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>

View File

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

View File

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