[JS] Drag&Drop 구현 예제(feat. SortableJS)

Drag&Drop 라이브러리를 찾아서 사용중인데 구조를 간단히 설명하자면

 

Sortable([드래그할 아이템들의 컨테이너], [옵션값(Json 형식)]으로 구성되어있다.

new Sortable(Element, Option);

 

첫번째 인자에는 Element를 적으라고 하지만, 왠지 모르겠으나 id값을 넣어줘도 작동을 한다.

 

옵션값은 상당히 많아 가장 아래의 문서 링크를 참조하면되고

 

여기서는 자주쓰일법한 예제만 적어둔다.

---

1. 위치 이동

See the Pen Untitled by Sangyoung Park (@Sangyoung-Park) on CodePen.

 

2. 그룹 이동

See the Pen sortableExcample2 by Sangyoung Park (@Sangyoung-Park) on CodePen.

 

3. 그룹 복제 이동

See the Pen sortableExample3 by Sangyoung Park (@Sangyoung-Park) on CodePen.

 

4. 재정렬 불가능(그룹 이동시 정렬은 가능하나 그 이후 정렬 불가)

See the Pen sortableExample4 by Sangyoung Park (@Sangyoung-Park) on CodePen.

 

5. 핸들러 생성하기(Icon등으로 활용)

See the Pen sortableExample5 by Sangyoung Park (@Sangyoung-Park) on CodePen.

 

 

6. 교체

See the Pen sortableExample6 by Sangyoung Park (@Sangyoung-Park) on CodePen.

 

7. 삭제하기

See the Pen sortableExample7 by Sangyoung Park (@Sangyoung-Park) on CodePen.

---

더 많은 예제는 아래 링크를 참고

 

예체 참고

https://sortablejs.github.io/Sortable/

 

SortableJS 문서

https://github.com/SortableJS/Sortable