[Vue] Drag And Drop 드래그 앤 드롭 (2)

 

[Vue] Drag and Drop

 

---

💡 Part 3. Drag & Drop 메소드 구현하기

• 드래그할 아이템에 @dragstart="startDrag($event, item)" 추가하기
  
  • startDrag 메소드
    

     // startDrag
     const startDrag = (event, item) =>{
       event.dataTransfer.dropEffect = "move";
       event.dataTransfer.effectAllowed = "move";
       event.dataTransfer.setData("selectItem", item.content);
     }​

• 드래그 영역에 @drop="onDrop($event,영역번호)" 추가하기
  • onDrop 메소드
    

    // 드롭 부분
    const onDrop = (event, list) => {
      const selectItem = event.dataTransfer.getData("selectItem"); // 드래그앤 드롭한 아이템
      var tmp = [];
      if (list == 1) { // leftList
        const item = state.rightList.find(
          (item) => item.content == selectItem
        );
        state.leftList.push(item); // 좌측 리스트에 추가를 해주고
        state.rightList.forEach((q) => { // 우측에서는 빼준다.
          if (q.content != item.content) tmp.push(q);
        });
        state.rightList = tmp;
      } 
      else { // right List
        const item = state.leftList.find(
          (item) => item.content == selectItem
        );
        state.rightList.push(item);
        state.leftList.forEach((q) => {
          if (q.content != item.content) tmp.push(q);
        });
        state.leftList = tmp;
      }
    };

    
    
    

💡 Part 4. 동작 확인하기

 

동작 확인 영상

---

 

CPDM