라이브러리 창고/레이아웃 · 내비게이션 메뉴 · 버튼
『SortableJS』반응형 테이블메뉴 만들기
Recstasy
2021. 3. 19. 06:14
sortable.JS는 테이블 메뉴를 드래그 & 드랍으로 조절할 수 있는 기능을 제공한다.
단지, 테이블 메뉴가 필요할 뿐이라면,
굳이 제이쿼리, 파운데이션과 같은 무거운 라이브러리를
사용하기보다 SortableJS를 추천한다.
sortablejs.github.io/Sortable/
SortableJS
Thresholds Try modifying the inputs below to affect the swap thresholds. You can see the swap zones of the squares colored in dark blue, while the "dead zones" (that do not cause a swap) are colored in light blue. new Sortable(example7, { swapThre
sortablejs.github.io
CDN::
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
간단하게 CDN코드를 붙여넣고,
ul > li 태그를 사용해보자.
Simple list example
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
*드래그&드랍 메뉴
SortableJS의 매력은 심플함이다.
부담스러운 CSS관련 라이브러리를 사용하지 않고,
간단하면서도 사용자의 편의성을 고려한 느낌이 든다.