javascriptjquerydraggableresizable

JQuery Resize - Bring to Front

I've made several overlapping objects draggable and resizable via the JQuery Draggable and Resizable plugins. When dragging an object, it's instantly brought up to the frontmost position thanks to the stack option. The Resizable plugin doesn't have this option so when an element in the background is being resized but not dragged, it stays in the back.

How do I make an object being resized jump to the front just like it happens when it's being dragged?

Thanks

Solution

  • You can implement this yourself by using the start event of the resizable widget.

    In that event you just loop through your draggable/resizable elements to find the highest zIndex, then set your currently resizing element higher in the stack.

    For example (heavily commented for clarity).

    // Common class of our draggable/resizable elements
const targetClass = ".foo";

$(targetClass)
  .resizable({
    start: (event, ui) => {
      // current resizing element
      const element = $(ui.element[0]);
      let topZIndex = 0;
      // loop over all our elements 
      $(targetClass).each((i, obj) => {
        // get the current zIndex as an int, using the unary operator
        // and accounting for NaN values like 'auto'
        const currentZIndex = +$(obj).css("zIndex") || 0;
        // if current zIndex is higher, update the topZIndex 
        currentZIndex > topZIndex && (topZIndex = currentZIndex);
      });
      // set the resizing elements zIndex above the highest
      element.css("zIndex", topZIndex + 1);
    }
  })
  .draggable({
    stack: targetClass
  });
    .foo {
  width: 100px;
  height: 100px;
  padding: 0.5em;
  position: absolute !important;
}

.foo h3 {
  text-align: center;
  margin: 0;
}
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<div id="container">
  <div class="foo ui-widget-content">
    <h3 class="ui-widget-header">test 1</h3>
  </div>
  <div class="foo ui-widget-content">
    <h3 class="ui-widget-header">test 2</h3>
  </div>
  <div class="foo ui-widget-content">
    <h3 class="ui-widget-header">test 3</h3>
  </div>
</div>