<div class="ig-wrap">
  <h2 class="ig-heading">Gallery — drag to reorder</h2>
  <div class="ig-grid" id="igGrid"></div>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, -apple-system, sans-serif; background: #f8fafc; min-height: 100vh; padding: 24px; }

.ig-wrap { max-width: 640px; margin: 0 auto; }
.ig-heading { font-size: 16px; font-weight: 800; color: #1e293b; margin-bottom: 14px; }

.ig-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
}
@media (max-width: 520px) {
  .ig-grid { grid-template-columns: repeat(2, 1fr); }
}

.ig-tile {
  position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 3 / 2;
  cursor: grab; border: 2px solid transparent; transition: border-color 0.12s, opacity 0.15s;
  background: #e2e8f0;
}
.ig-tile:active { cursor: grabbing; }
.ig-tile img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ig-tile.ig-dragging { opacity: 0.35; }
.ig-tile.ig-drag-over { border-color: #6366f1; }
.ig-tile-index {
  position: absolute; top: 6px; left: 6px; background: rgba(15,23,42,0.65); color: #fff;
  font-size: 10.5px; font-weight: 800; width: 20px; height: 20px; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
}

const grid = document.getElementById('igGrid');

const SEEDS = ['sunset', 'forest', 'ocean', 'city', 'mountain', 'desert', 'harbor', 'meadow'];

let images = SEEDS.map((seed, i) => ({
  id: 'img-' + i,
  url: 'https://picsum.photos/seed/' + seed + '/300/200',
}));

let dragId = null;

function renderGrid() {
  grid.innerHTML = '';
  images.forEach((img, i) => {
    const tile = document.createElement('div');
    tile.className = 'ig-tile';
    tile.draggable = true;
    tile.dataset.id = img.id;
    tile.innerHTML = '<span class="ig-tile-index">' + (i + 1) + '</span><img src="' + img.url + '" alt="Gallery image ' + (i + 1) + '" />';

    tile.addEventListener('dragstart', (e) => {
      dragId = img.id;
      e.dataTransfer.setData('text/plain', img.id);
      e.dataTransfer.effectAllowed = 'move';
      setTimeout(() => tile.classList.add('ig-dragging'), 0);
    });

    tile.addEventListener('dragend', () => {
      tile.classList.remove('ig-dragging');
      dragId = null;
      document.querySelectorAll('.ig-tile').forEach((t) => t.classList.remove('ig-drag-over'));
    });

    tile.addEventListener('dragover', (e) => {
      e.preventDefault();
      if (img.id === dragId) return;
      tile.classList.add('ig-drag-over');
    });

    tile.addEventListener('dragleave', () => {
      tile.classList.remove('ig-drag-over');
    });

    tile.addEventListener('drop', (e) => {
      e.preventDefault();
      tile.classList.remove('ig-drag-over');
      const sourceId = e.dataTransfer.getData('text/plain');
      if (!sourceId || sourceId === img.id) return;

      const fromIndex = images.findIndex((im) => im.id === sourceId);
      const toIndex = images.findIndex((im) => im.id === img.id);
      if (fromIndex === -1 || toIndex === -1) return;

      const [moved] = images.splice(fromIndex, 1);
      images.splice(toIndex, 0, moved);
      renderGrid();
    });

    grid.appendChild(tile);
  });
}

renderGrid();