Sortable JS💡

오늘은 과제를 하다가 드래그로 목록의 순서를 바꿀 수 있도록 해주는 Sortable JS를 사용해 볼 기회가 생겨 간단한 사용법과 후기를 남기러 왔다 !

sortable JS 자세히보기

💛Sortable JS의 기본 사용법

• new Sortable(요소, 옵션)

생각보다 사용법이 너무너무 간단해서 조금 놀랐다 !
별도의 설정없이 sortable js 설치 후 import, 혹은 cdn방식으로 import 후에
아래와같이 ul태그를 new Sortable() 을 통해 Sortable한 요소로 만들어주기만하면
간단하게 ul태그 아래의 모든 li요소들이 마우스 드래그 만으로 순서변경이 가능해진다

 $ npm i sortablejs

  import Sortable from "sortablejs";

  const ulEl = document.querySelector('ul')

// new Sortable()의 인자로 담은 요소의 하위요소들의 드래그 이동이 가능해진다
  new Sortable(ulEl)

---

💛사용해보기

new Sortable() 의 두번째 인자로는 다양한 옵션을 넣을 수 있다.
우선은 가장 흔하게 사용 할 것 같은 두개의 옵션만 입혀보았다!

• animation : 요소의 이동효과를 부드럽게 보이도록 animation 효과 부여

• ghostClass : 요소 클릭(이동)중, ghostClass에 할당 된 값을 해당 요소의 Class명으로 부여
  ( CSS에서 li.active에 color:red속성을 부여한 뒤 , ghostClass로 'active'를 할당
  => 요소 이동 중 선택 된 요소의 글자색이 red가 됨 )

더 다양한 옵션은 포스팅 최상단의 링크를 참고!

---

💛응용해보기

두 개의 그룹을 만들고, 각 요소의 옵션group에 같은 값은 할당해주면
이제 서로의 아이템 교환이 가능해진다 !
위 like와 dislike의 음식요소들을 마우스로 이동시켜보자 !

---

마치며🙌

처음 과제에 sortablejs 를 사용해보라고 했을 때에는
딱 봐도 너무 어려워 보인다며.. 무시하고 과제를 진행했었는데
과제가 빨리 끝나서 '그래 한번 해보자 !' 하고 막상 시도를 했더니 아닛 이렇게 쉬울줄이야...

생각보다 이쁘고 유용해보여서 사용법을 좀 더 익혀두면 앞으로도 종종 사용할 수 있을 것 같다 !!