I am facing an issue with my dynamically generated divs that have a z-index of 120 set in the CSS:
.plugin {
position: absolute;
z-index: 120;
}
These divs consist of a title (positioned on top) and a canvas:
.plugin_title {
font-size: 13px;
color: rgba(255, 255, 255, 0.9);
font-family: arial;
background-color: #300;
z-index: 150;
}
.plugin_canvas {
position: relative;
background-color: black;
border: 1px solid #300;
border-bottom-right-radius: 5px;
z-index: 120;
}
Upon creation, I do the following:
var div = $( '<div class="plugin ' + audioclass + '" id="'+ id + '"</div>').width(width + 2).height(height + 2);
var ctx = $( '<canvas class="plugin_canvas" width="' + width + '" height="'+ height + '" />', {width: width, height: height} );
var title = $( '<div class="plugin_title"> ' +name + ' </div>');
title.appendTo(div);
ctx.appendTo(div);
div.appendTo('#plugin_area');
Then I call jsplumb.draggable to make them draggable using JSPlumb's implementation of jQuery's .draggable():
jsPlumb.draggable(div, {cursor: "move", handle: title, opacity: 0.9, stack: ".plugin", scroll: true})
The problem arises when dragging a .plugin div; its z-index gets reset to 1 and incrementally increases due to the stack option. I want the z-index to start from 120 and increase accordingly.
In jqueryui 1.7, there was a min parameter for the stack option which is no longer available in the version 1.9.2 that I use. It should supposedly start stacking from the existing z-index value but seems to restart arbitrarily at 1. What could be causing this discrepancy?
(Using jsPlumb 1.3.16, jquery-ui 1.9.2, jquery 1.8.1. Unable to revert to an older version of jquery-ui)