CSS & Javascript, Import Full Page

Drag Showit Groups
containing multiple layers

draggable Moodboard

“Working with [Your Company Name] was a game-changer for our business. Their attention to detail and commitment to excellence exceeded our expectations.”
— Client Name

(function () {
  function makeDraggable(el) {
    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
      };
    }

    el.addEventListener('pointerdown', function (e) {
      dragging = true;
      const pos = currentPos();
      originX = pos.x;
      originY = pos.y;
      startX = e.clientX;
      startY = e.clientY;
      el.setPointerCapture(e.pointerId);
      e.stopPropagation(); // innermost .draggable wins — child drags the child, group background drags the group
      e.preventDefault();
    });

    el.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 { el.releasePointerCapture(e.pointerId); } catch (err) {}
    }
    el.addEventListener('pointerup', stop);
    el.addEventListener('pointercancel', stop);
  }

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

1. Additionally, pastes in ADVANCED SETTINGS > PAGE LOADED JAVASCRIPT:

.draggable {
  position: absolute;
  cursor: move;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.draggable img {
  -webkit-user-drag: none;
}

1. To make animation work, paste in ADVANCED SETTINGS > CUSTOM CSS: