How to call jquery drag event

Question

My code has some divs that appear on the screen based on different actions. The divs have handles that make them draggable via the jquery ui.draggable code. I have the draggable ui stack option set, so that when you drag an item, it automatically moves to the front of all other draggable items.

The problem I am having is that I want a div moved to the front even if you just click on the handle, without dragging it anywhere. I've tried triggering various events when the handle is clicked, such as mousedown, mousemove, mouseup, drag, dragstart and dragstop, but none seem to do the trick. I've also tried just changing the z-index values, but that also hasn't worked well so far.

My code looks something like this. Say I have the div, and the handle is an h5 tag. I have instantiated the draggable function already. So I have:

$("div.window h5").click(function() {
   $(this).parents("div:first").trigger("whatever event i am trying");
)};

But this isn't working. (I've also tried putting the trigger on the h5 itself instead of the parent div). I am not seeing an errors, I am just not getting the desired result.

Thanks in advance for any help!

Answer 1

Try this:

$("div.window h5").click(function(e){

   // Variable to hold the highest z-index
   var largestZ = 1; 

   // I have used div.window h5 but this should cycle through each draggable element
   $("div.window h5").each(function(i) {
      // Get the the z-index and update if it is larger than current largest value
      var currentZ = parseFloat($(this).css("zIndex"));
      largestZ = currentZ > largestZ ? currentZ : largestZ;
   });

   $(this).css("z-index", largestZ + 1);
});

Some of the selectors might need to change because I can't see your full code. I found this snippet and modified it from here.