<div class="draggable-gif-wrapper">
  <div id="draggable-gif-container">
    <img
      id="draggable-gif"
      src="https://hellowest.fr/wp-content/uploads/2025/12/WhatsApp-GIF-2025-12-10-at-10.07.31.gif"
      alt="GIF interactif"
    />
  </div>
</div>

<style>
  .draggable-gif-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
    margin: 20px 0;
  }

  #draggable-gif-container {
    width: 300px;              /* ajuste comme tu veux */
    height: 300px;             /* idem */
    border: 1px solid #eee;
    overflow: hidden;          /* évite que le gif dépasse visuellement */
    position: relative;
    touch-action: none;        /* important pour le drag sur mobile */
  }

  #draggable-gif {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
  }

  #draggable-gif.dragging {
    cursor: grabbing;
  }
</style>

<script>
  (function () {
    const img = document.getElementById('draggable-gif');
    const container = document.getElementById('draggable-gif-container');
    if (!img || !container) return;

    let isDragging = false;
    let startX = 0;
    let startY = 0;
    let offsetX = 0;
    let offsetY = 0;

    function onPointerDown(e) {
      isDragging = true;
      img.classList.add('dragging');
      img.setPointerCapture(e.pointerId);

      startX = e.clientX - offsetX;
      startY = e.clientY - offsetY;
    }

    function onPointerMove(e) {
      if (!isDragging) return;

      offsetX = e.clientX - startX;
      offsetY = e.clientY - startY;

      img.style.transform = `translate(calc(-50% + ${offsetX}px), calc(-50% + ${offsetY}px))`;
    }

    function onPointerUp(e) {
      isDragging = false;
      img.classList.remove('dragging');
      try {
        img.releasePointerCapture(e.pointerId);
      } catch (err) {}
    }

    img.addEventListener('pointerdown', onPointerDown);
    window.addEventListener('pointermove', onPointerMove);
    window.addEventListener('pointerup', onPointerUp);
    window.addEventListener('pointercancel', onPointerUp);
  })();
</script>