VueJS - Drag and Drop

Vue.js에서 특정 컴포넌트 위치를 움직이고 싶을 때
-> 즉, Drag and Drop으로 Drop된 위치로 움직이고 싶을때 방법

1. methods 영역

      this.dragIndex = index;
      this.movingOffsetX = event.screenX;
      this.movingOffsetY = event.screenY;
      event.dataTransfer.effectAllowed = 'move';
    },
    handleDragOver(event) {
      event.preventDefault();
    },
    handleDrop(event) {
      event.preventDefault();
      const draggedItem = this.items[this.dragIndex];
      const x = this.movingOffsetX - event.screenX;
      const y = this.movingOffsetY - event.screenY;
      draggedItem.Right = draggedItem.Right + x;
      draggedItem.Top = draggedItem.Top - y;
      this.dragIndex = null;
    },

2. data() 영역

items: [
        { id: 1, text: 'Item 1', Right: 12.8, Top: 304 }
      ],
dragIndex: null,
movingOffsetX: 0,
movingOffsetY: 0,

• data()영역에서, 기본적인 Right 속성, Top 속성을 정의 해 준다. 이 속성값은 초기 움직이려고 하는 엘리먼트의 위치다.
• 이후 움직이다가 마우스를 드래그 이후 놓았을 때, handleDrop함수에서 계산된
  draggedItem.rigt = draggedItem.Right + x;
  draggedItem.Top = draggedItem.Top - y; 를 통해 위치가 바뀐다.

3. template() 영역

// 움직이려고 하는 전체 엘리먼트 (움직일 수 있는 영역) 
<div class="map-container" @click="isActiveImage = true" ref="container" @dragover="handleDragOver($event)"
    @drop="handleDrop($event)">


// 움직이고자 하는 엘리먼트
<div 
v-for="(item, index) in items" :key="item.id"
 :style="{ right: item.Right + 'px', top: item.Top + 'px' }"
        draggable="true" @dragstart="handleDragStart(index, $event)">

• 움직이고 싶은 영역에 @dragover속성으로 handleDragOver($event)를 주고, @drop속성으로 handleDrop($event)를 적용한다.

• 움직이려고 하는 엘리먼트 : dragable 속성 true로 적용한다.
  @dragstart속성으로 handleDragStart(index, $event)를 적용한다.