카드 소팅

<div class="stage">
  <div class="pool" id="pool"></div>
  <div class="cols">
    <div class="col"><div class="colhd">Food</div><div class="drop" id="d1"></div></div>
    <div class="col"><div class="colhd">Travel</div><div class="drop" id="d2"></div></div>
    <div class="col"><div class="colhd">Tech</div><div class="drop" id="d3"></div></div>
  </div>
</div>

.stage{width:94%;height:88%;display:flex;flex-direction:column;gap:6px}
.pool{position:relative;height:30%;border:1px dashed var(--line);border-radius:8px}
.cols{flex:1;display:flex;gap:8px}
.col{flex:1;display:flex;flex-direction:column;gap:4px}
.colhd{font:700 10px/1 monospace;color:var(--muted);text-align:center}
.drop{flex:1;border:1px solid var(--line);border-radius:8px;position:relative;background:var(--surface)}
.card{position:absolute;width:38px;height:22px;border-radius:5px;background:var(--accent);color:#fff;
  font:700 9px/22px sans-serif;text-align:center;transition:left .6s ease,top .6s ease,background .6s}
.card.travel{background:var(--accent-2)}
.card.tech{background:var(--accent-3)}

const pool = document.getElementById('pool');
const items = [
  { t: 'Apple', cls: '', col: 'd1' },
  { t: 'Rice', cls: '', col: 'd1' },
  { t: 'Paris', cls: 'travel', col: 'd2' },
  { t: 'Hotel', cls: 'travel', col: 'd2' },
  { t: 'App', cls: 'tech', col: 'd3' },
  { t: 'Cloud', cls: 'tech', col: 'd3' },
];
const els = items.map((it, i) => {
  const d = document.createElement('div');
  d.className = 'card ' + it.cls;
  d.textContent = it.t;
  d.style.left = (10 + (i % 3) * 60) + 'px';
  d.style.top = (10 + Math.floor(i / 3) * 28) + 'px';
  pool.appendChild(d);
  return d;
});
function sortAll() {
  items.forEach((it, i) => {
    const target = document.getElementById(it.col);
    const r = target.getBoundingClientRect();
    const p = pool.getBoundingClientRect();
    els[i].style.left = (14 + (i % 2) * 44) + 'px';
    els[i].style.top = (target.offsetTop + 10 + Math.floor(i / 2) * 26) + 'px';
    target.appendChild(els[i]);
    els[i].style.position = 'absolute';
  });
}
function resetAll() {
  items.forEach((it, i) => {
    pool.appendChild(els[i]);
    els[i].style.left = (10 + (i % 3) * 60) + 'px';
    els[i].style.top = (10 + Math.floor(i / 3) * 28) + 'px';
  });
}
let sorted = false;
function toggle() {
  sorted = !sorted;
  if (sorted) sortAll(); else resetAll();
}
setInterval(toggle, 2200);