[Vue3] Sortable JS 적용기!

Sortable JS
sortablejs 라이브러리는 드래그 앤 드랍 모션을 적용시킬 때 너무나도 편하고 쉽게 작업할 수 있게 도와주는 좋은 친구이다.
나는 회사에서 차트를 이용한 리포트 대시보드를 구현할 때 유용하게 써먹었다.

바로 적용해보자~!

1. 라이브러리 설치

npm install sortablejs

2. 사용 방법

<el-row class="draggable-list" :gutter="20">
  <el-col
     v-for="(item, idx) in items" :key="idx"
     :item="item"
     style="padding: 5px !important;"
   >
  </el-col>
</el-row>

const createSortable = () => {
  const el = document.querySelector('.draggable-list');

  const sortable = new Sortable(el, {
    animation: 1000,
    ghostClass: "drop-placeholder",
    group: 'shared',
  });
};

onMounted(() => {
  items.value = [
    // 원하는 데이터
  ];

  createSortable();
});

• html 내에 아이템들을 감싸고 있는 부모 요소를 가져온 다음,

• new Sortable 안에 해당 요소와 함께 원하는 옵션들을 지정해주면, 적용 끝이다!

너무너무 간단하게 드래그 이벤트를 구현할 수 있었다.
해당 라이브러리를 적용하기 전에는 그냥 순수하게 라이브러리를 사용하지 않고 구현 했었는데, 라이브러리를 잘 쓸 줄 아는 것도 능력인 것 같다.

나는 간단한 옵션들만 적용을 했지만, 공식 문서를 보면 정말 많은 옵션이 있으므로 다양하게 적용이 가능할 것 같다~!

참고 자료
공식 문서 : https://github.com/SortableJS/Sortable
Sortable 데모 사이트 : http://sortablejs.github.io/Sortable