How to use jQuery draggable stack option on an id not a class

Question

I create draggable, resizable pictures and want the last one dragged (and if possible clicked) to be on top. Each div has it's own id and all have the class 'rectangle'.

The jQuery example initiazies using a class ".selector":

$( ".selector" ).draggable({
  stack: ".products"
});

I initialize mine with their id

$(boxId).draggable({
    stack:".rectangle",
    containment: "parent",
    snap:true,
    snapTolerance: 6,

    .
    .
 });

It does not work. So I googled the problem and tried another way

stop: function (event, ui){
    $(ui.element).css({'z-index': 2000});
}

I knew if it worked I would have to use an increated variable instead of 2000 but did not work either. Please help.

what is _increated_ supposed to mean? – specializt Apr 07 '15 at 09:32 — specializt, Apr 07 '15 at 09:32

score 0 · Answer 1 · answered Apr 07 '15 at 09:26

If you want last clicked(dragged) picture to be on top you can change its Z-index in the mousedown event like that:

$('.rectangle').mousedown(function() {
  var max = 0;
  $('.rectangle').each(function() {
    var z = parseInt($(this).zIndex(), 10);
    max = Math.max(max, z);
  });
  $(this).zIndex(max + 1);
});

Or you can use the start event of the draggable:

$('.rectangle').draggable({
  start: function( event, ui ) {
    var max = 0;
    $('.rectangle').each(function() {
      var z = parseInt($(this).zIndex(), 10);
      max = Math.max(max, z);
    });
    $(this).zIndex(max + 1);
  }
});

How to use jQuery draggable stack option on an id not a class

1 Answers1