Sortable List Nieuw

<!-- Sortable List · Bron: Cult UI · licentie MIT. Laat deze vermelding staan bij hergebruik. -->
<div class="jouw-container">
<div class="sol"><div class="sol__head"><b>Prioriteiten deze week</b><span class="sol__live" aria-live="polite"></span></div><ol class="sol__list"><li class="sol__it"><span class="sol__n">1</span><span class="sol__t">Offerte Van Dijk Installatie afronden</span><button class="sol__h" type="button" aria-label="Verplaats: Offerte Van Dijk Installatie afronden"><i></i></button></li><li class="sol__it"><span class="sol__n">2</span><span class="sol__t">Bouwtekening Kerkstraat 14 controleren</span><button class="sol__h" type="button" aria-label="Verplaats: Bouwtekening Kerkstraat 14 controleren"><i></i></button></li><li class="sol__it"><span class="sol__n">3</span><span class="sol__t">Facturen september versturen</span><button class="sol__h" type="button" aria-label="Verplaats: Facturen september versturen"><i></i></button></li><li class="sol__it"><span class="sol__n">4</span><span class="sol__t">Monteur inplannen voor Gouda</span><button class="sol__h" type="button" aria-label="Verplaats: Monteur inplannen voor Gouda"><i></i></button></li></ol></div>
</div>

/* Sortable List · Bron: Cult UI · licentie MIT. Laat deze vermelding staan bij hergebruik. */
.sol{width:310px;max-width:90%;font-family:'Switzer',system-ui,sans-serif;color:#0a0a0a}
.sol__head{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:8px;font-size:13px}
.sol__live{font:500 9px/1 'JetBrains Mono',monospace;letter-spacing:.08em;color:#F5480F;text-transform:uppercase}
.sol__list{list-style:none;margin:0;padding:0;position:relative}
.sol__it{display:flex;align-items:center;gap:10px;height:36px;margin-bottom:6px;padding:0 4px 0 10px;background:#fff;border:1px solid rgba(10,10,10,.12);border-radius:4px;font-size:13px;box-sizing:border-box;position:relative;transition:transform .22s cubic-bezier(.22,1,.36,1),box-shadow .2s}
.sol__it.is-drag{transition:box-shadow .2s;z-index:3;box-shadow:0 10px 24px rgba(10,10,10,.18);border-color:#0a0a0a}
.sol__n{flex:none;width:18px;font:500 10px/1 'JetBrains Mono',monospace;color:#F5480F}
.sol__t{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sol__h{flex:none;width:30px;height:30px;border:0;background:none;border-radius:3px;cursor:grab;touch-action:none;display:flex;align-items:center;justify-content:center;padding:0}
.sol__h i{width:10px;height:14px;background:radial-gradient(circle,#0a0a0a 1.3px,transparent 1.6px) 0 0/5px 5px;opacity:.5}
.sol__h:hover i{opacity:1}
.sol__h:focus-visible{outline:2px solid #F5480F;outline-offset:1px}
.sol__it.is-drag .sol__h{cursor:grabbing}
@media(prefers-reduced-motion:reduce){.sol__it{transition:none}}

// Sortable List · Bron: Cult UI · licentie MIT. Laat deze vermelding staan bij hergebruik.
// root = het element waarin de HTML staat
function init(root){
var w = root.querySelector('.sol'); if (!w) return;
    var list = w.querySelector('.sol__list'), live = w.querySelector('.sol__live');
    function items() { return [].slice.call(list.children); }
    function renum() { items().forEach(function (li, i) { li.querySelector('.sol__n').textContent = i + 1; }); }
    var drag = null;
    list.addEventListener('pointerdown', function (e) {
      var h = e.target.closest('.sol__h'); if (!h) return; e.preventDefault();
      var li = h.closest('.sol__it'), all = items(), step = li.offsetHeight + 6;
      drag = { li: li, h: h, all: all, from: all.indexOf(li), to: all.indexOf(li), y0: e.clientY, step: step, id: e.pointerId };
      h.setPointerCapture(e.pointerId); li.classList.add('is-drag');
    });
    list.addEventListener('pointermove', function (e) {
      if (!drag || e.pointerId !== drag.id) return;
      var n = drag.all.length, dy = e.clientY - drag.y0;
      dy = Math.max(-drag.from * drag.step, Math.min((n - 1 - drag.from) * drag.step, dy));
      drag.li.style.transform = 'translateY(' + dy + 'px)';
      var to = Math.max(0, Math.min(n - 1, Math.round(drag.from + dy / drag.step))); drag.to = to;
      drag.all.forEach(function (o, i) { if (o === drag.li) return; var s = 0; if (i > drag.from && i <= to) s = -drag.step; else if (i < drag.from && i >= to) s = drag.step; o.style.transform = s ? 'translateY(' + s + 'px)' : ''; });
    });
    function end(e) {
      if (!drag || (e && e.pointerId !== drag.id)) return;
      var d = drag; drag = null;
      d.li.style.transition = 'transform .2s cubic-bezier(.22,1,.36,1)'; d.li.style.transform = 'translateY(' + ((d.to - d.from) * d.step) + 'px)';
      setTimeout(function () {
        d.all.forEach(function (o) { o.style.transition = 'none'; o.style.transform = ''; });
        var ref = d.all.filter(function (o) { return o !== d.li; })[d.to] || null; list.insertBefore(d.li, ref);
        d.li.classList.remove('is-drag'); void list.offsetWidth; d.all.forEach(function (o) { o.style.transition = ''; });
        renum(); if (d.to !== d.from) live.textContent = 'Naar positie ' + (d.to + 1);
      }, 210);
    }
    list.addEventListener('pointerup', end); list.addEventListener('pointercancel', end);
    list.addEventListener('keydown', function (e) {
      var h = e.target.closest('.sol__h'); if (!h) return; var li = h.closest('.sol__it'), all = items(), i = all.indexOf(li);
      if (e.key === 'ArrowUp' && i > 0) { e.preventDefault(); list.insertBefore(li, all[i - 1]); }
      else if (e.key === 'ArrowDown' && i < all.length - 1) { e.preventDefault(); list.insertBefore(all[i + 1], li); }
      else return;
      renum(); h.focus(); live.textContent = 'Positie ' + (items().indexOf(li) + 1) + ' van ' + all.length;
    });
}
init(document.querySelector('.jouw-container'));