Vue 3 실전: 드래그 앤 드롭

const{createApp,ref}=Vue;
createApp({
  setup(){
    const cols=ref({
      todo:[{id:1,text:'HTML5 챕터 완료'},{id:2,text:'CSS3 학습'},{id:3,text:'JS 연습'}],
      doing:[{id:4,text:'Vue 3 공부중'}],
      done:[{id:5,text:'React 완료'}]
    });
    const dragging=ref(null);const fromCol=ref(null);
    const onDragStart=(item,col)=>{dragging.value=item;fromCol.value=col;};
    const onDrop=(toCol)=>{
      if(!dragging.value||fromCol.value===toCol)return;
      cols.value[fromCol.value]=cols.value[fromCol.value].filter(i=>i.id!==dragging.value.id);
      cols.value[toCol].push(dragging.value);
      dragging.value=null;
    };
    return{cols,dragging,fromCol,onDragStart,onDrop};
  },
  template:`<div style='display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;'>
    <div v-for='[col,label] in [["todo","TODO"],["doing","DOING"],["done","DONE"]]' :key='col'
      @dragover.prevent @drop='onDrop(col)'
      style='background:#0a0a0a;padding:8px;min-height:120px;border:1px solid #1a1a1a;'>
      <div style='color:#10b981;font-size:9px;letter-spacing:0.2em;margin-bottom:8px;'>{{label}}</div>
      <div v-for='item in cols[col]' :key='item.id' draggable='true' @dragstart='onDragStart(item,col)'
        style='background:#111;padding:6px;margin-bottom:4px;font-size:10px;color:#888;cursor:grab;border:1px solid #222;'>
        {{item.text}}
      </div>
    </div>
  </div>`
}).mount('#drag-out');