목록drop (1)

익명의 개발노트

[vue.js] dragula를 이용하여 drag and drop 구현하기

dragula를 이용한 드래그 앤 드랍 구현하기. 1. 라이브러리 설치 npm i dragula 2. 템플릿 작성 Element 1 Element 2 Element 3 Display Vue.js에서 DOM에 직접 접근하기 위하여 ref를 사용한다. 3. 스크립트 코드작성 dragula를 import하고, dragula의 첫번째 인자값은 어디에서 어디로 옮길 것인지, 그것에 대한 DOM을 넣어주면 되고, 두번째 인자값은 옵션이다. .on은 드랍했을때 이벤트 처리를 나타낸다. 없어도 무관하다. 4. 스타일 코어기능은 이러하고, 여기서 응용해서 제작하면 될 듯 싶다.
코딩일기/TIL 2020. 2. 26. 20:03
Prev 1 Next