Drag-to-Reorder Carousel — HTML CSS JS Snippet

<div class="drc-wrap">
  <div class="drc-track" id="drcTrack">
    <div class="drc-slide" draggable="true" data-id="1" style="background:linear-gradient(160deg,#6366f1,#4338ca)">1</div>
    <div class="drc-slide" draggable="true" data-id="2" style="background:linear-gradient(160deg,#0ea5e9,#0369a1)">2</div>
    <div class="drc-slide" draggable="true" data-id="3" style="background:linear-gradient(160deg,#ec4899,#9d174d)">3</div>
    <div class="drc-slide" draggable="true" data-id="4" style="background:linear-gradient(160deg,#10b981,#047857)">4</div>
    <div class="drc-slide" draggable="true" data-id="5" style="background:linear-gradient(160deg,#f59e0b,#b45309)">5</div>
  </div>
  <p class="drc-hint">Drag any card to reorder the carousel — the new order persists.</p>
  <p class="drc-order" id="drcOrder"></p>
</div>

*{box-sizing:border-box;margin:0;padding:0}
body{font-family:system-ui,-apple-system,sans-serif;background:#f6f7f9;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.drc-wrap{width:100%;max-width:480px}
.drc-track{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}
.drc-slide{flex:0 0 90px;height:110px;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#fff;font-size:24px;font-weight:800;cursor:grab;box-shadow:0 8px 18px rgba(15,23,42,.16);transition:transform .15s,opacity .15s}
.drc-slide:active{cursor:grabbing}
.drc-slide.drc-dragging{opacity:.35}
.drc-slide.drc-drop-before{transform:translateX(-6px)}
.drc-slide.drc-drop-after{transform:translateX(6px)}
.drc-hint{text-align:center;color:#9ca3af;font-size:12px;margin-top:14px}
.drc-order{text-align:center;font:700 12px ui-monospace,monospace;color:#6366f1;margin-top:6px}

var track = document.getElementById('drcTrack');
var orderEl = document.getElementById('drcOrder');
var dragging = null;

function updateOrderLabel() {
  var ids = Array.prototype.map.call(track.children, function (el) { return el.dataset.id; });
  orderEl.textContent = 'Order: ' + ids.join(' → ');
}

function getSlides() { return Array.prototype.slice.call(track.querySelectorAll('.drc-slide')); }

track.addEventListener('dragstart', function (e) {
  dragging = e.target.closest('.drc-slide');
  if (!dragging) return;
  dragging.classList.add('drc-dragging');
  e.dataTransfer.effectAllowed = 'move';
});

track.addEventListener('dragend', function () {
  if (dragging) dragging.classList.remove('drc-dragging');
  getSlides().forEach(function (s) { s.classList.remove('drc-drop-before', 'drc-drop-after'); });
  dragging = null;
  updateOrderLabel();
});

track.addEventListener('dragover', function (e) {
  e.preventDefault();
  var target = e.target.closest('.drc-slide');
  if (!target || target === dragging) return;
  var rect = target.getBoundingClientRect();
  var isAfter = e.clientX - rect.left > rect.width / 2;
  getSlides().forEach(function (s) { s.classList.remove('drc-drop-before', 'drc-drop-after'); });
  target.classList.add(isAfter ? 'drc-drop-after' : 'drc-drop-before');
});

track.addEventListener('drop', function (e) {
  e.preventDefault();
  var target = e.target.closest('.drc-slide');
  if (!target || !dragging || target === dragging) return;
  var rect = target.getBoundingClientRect();
  var isAfter = e.clientX - rect.left > rect.width / 2;
  if (isAfter) {
    target.after(dragging);
  } else {
    target.before(dragging);
  }
});

// Keyboard reordering as a real alternative to drag: focus a card, then hold
// Shift with an arrow key to move it one position left/right in the DOM.
track.addEventListener('keydown', function (e) {
  var el = e.target.closest('.drc-slide');
  if (!el || !e.shiftKey) return;
  if (e.key === 'ArrowRight' && el.nextElementSibling) { el.nextElementSibling.after(el); updateOrderLabel(); e.preventDefault(); }
  else if (e.key === 'ArrowLeft' && el.previousElementSibling) { el.previousElementSibling.before(el); updateOrderLabel(); e.preventDefault(); }
});

getSlides().forEach(function (s) { s.tabIndex = 0; });
updateOrderLabel();