<script>

(function () {
  // Walk up from the clicked element to the box Showit actually positions
  // (the nearest ancestor carrying inline left/top, or a .shwt-element / .shwt-group).
  function resolveTarget(el) {
    let node = el;
    while (node && node !== document.body) {
      const hasInlinePos = node.style && (node.style.left !== '' || node.style.top !== '');
      if (hasInlinePos || node.matches('.shwt-element, .shwt-group')) return node;
      node = node.parentElement;
    }
    return el; // fallback: move the class element itself
  }

  function makeDraggable(handle) {
    const el = resolveTarget(handle); // the box we MOVE
    let dragging = false;
    let startX, startY, originX, originY;

    function currentPos() {
      const left = parseInt(el.style.left, 10);
      const top = parseInt(el.style.top, 10);
      return {
        x: isNaN(left) ? el.offsetLeft : left,
        y: isNaN(top) ? el.offsetTop : top
      };
    }

    handle.addEventListener('pointerdown', function (e) { // listen on what you CLICK
      dragging = true;
      const pos = currentPos();
      originX = pos.x;
      originY = pos.y;
      startX = e.clientX;
      startY = e.clientY;
      handle.setPointerCapture(e.pointerId);
      e.stopPropagation();
      e.preventDefault();
    });

    handle.addEventListener('pointermove', function (e) {
      if (!dragging) return;
      el.style.left = (originX + (e.clientX - startX)) + 'px';
      el.style.top = (originY + (e.clientY - startY)) + 'px';
    });

    function stop(e) {
      dragging = false;
      try { handle.releasePointerCapture(e.pointerId); } catch (err) {}
    }
    handle.addEventListener('pointerup', stop);
    handle.addEventListener('pointercancel', stop);
  }

  window.addEventListener('load', function () {
    document.querySelectorAll('.draggable').forEach(makeDraggable);
  });
})();

</script>