dragula.js 사용법

최근 drag&drop 인터페이스를 구현해야되서 찾아보던중 dragula.js라는 라이브러리를 알게 되었다.

찾아본 바로는 본 라이브러리가 drag&drop에 있어서는 가장 뛰어난 라이브러리라 생각된다.

하지만 사용문서가 제대로 나와 있지 않아서 사용하는데 조금 애를 먹었다.

결론적으로 example 파일을 뜯어보면서 결국적으로 사용법을 익히게 되었다.

아래는 예제의 링크이다.

https://bevacqua.github.io/dragula/

혹 예제를 보시면 알겠지만 사용법은 그리 어렵지 않다.

하지만 핵심적으로 기억해야 하는 클래스가 있다.

바로 gu-mirror 클래스인데,

본 클래스는 drag시 선택된 레이어에 대한 클래스이다.

gu-mirror 클래스를 알아야 drag&drop시 마우스 커서 스타일도 지정가능하고,

선택된 레이어의 속성또한 변경 가능하다.

(나는 정렬때문에 이 기능을 알아야 했는데, 선택된 레이어 스타일이 왼쪽정렬로 적용되어 되어있다.

이것을 가운데 정렬로 바꾸기 위해 gu-mirror 클래스를 발견해야 했다.)