0

I have several (dinamically generated) divs, whose z-index is set in css to 120:

.plugin {
        position: absolute;
        z-index: 120;
    }

They contain a title (positioned on the 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;
    }

When I create them, I do:

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 call jsplumb.draggable to make them draggable (jsplumb just calls jquery's .draggable())

jsPlumb.draggable(div, {cursor: "move", handle: title, opacity: 0.9, stack: ".plugin", scroll: true})

The problem is that when I drag one of the .plugin divs, its z-index is reset to 1 (and incremented each time I drag it, because of the stack option). Instead, I want the z-index to start from 120 (the original z-index value for the .plugin divs) and be incremented from that value.

jqueryui 1.7 had a min parameter for the stack option. In jqueryui 1.9.2 (the version I'm using), you can only specify a selector, and, from which I can understand, the stacking should start from the pre-existent z-index of the element. Instead, it seems arbitrarily re-starting at 1. What am I missing?

(jsplumb: 1.3.16, jqueryui: 1.9.2, jquery: 1.8.1. Please note I can't roll back to an older version of jquery-ui)

janesconference
  • 6,333
  • 8
  • 55
  • 73

1 Answers1

0

Resolved using

$(".plugin").each(function() {
            // always use a radix when using parseInt
            var index_current = parseInt($(this).css("zIndex"), 10);
            if((20 - index_current) > 0) {
                $(this).css("zIndex", 20 + index_current);
            }
        });

Also bug reported and fixed in jqueryUI here.

janesconference
  • 6,333
  • 8
  • 55
  • 73