Draggable은 모듈식 드래그 앤 드롭 라이브러리로, 작은 기능부터 시작하여 필요한 기능을 추가해 나갈 수 있습니다. 가장 기본적인 기능인 드래그 앤 드롭, 빠른 DOM 재정렬, 접근성 있는 마크업, 그리고 다양한 이벤트 처리 기능을 제공합니다.
네이티브 드래그, 마우스, 터치 및 포스 터치 이벤트와 호환됩니다.
드래그 가능한 이벤트의 수명 주기에 연결하여 드래그 동작을 확장할 수 있습니다.
끌어당길 수 있는 대상에 센서를 추가하여 끌어당김 감지 기능을 확장할 수 있습니다.
이 라이브러리는 ES6를 우선적으로 대상으로 합니다.
# 라이센스
MIT License
# 사용방법
압축파일에 보시면 test.html 파일이 있습니다. 많은 기능들 중 Sortable, Swappable 기능만 데모로 구현해 두었습니다.
# 옵션 설정
Draggable 공통 옵션
- draggable : 드래그 가능한 요소의 CSS 셀렉터 - handle : 드래그를 시작할 핸들 요소의 CSS 셀렉터 - delay : 드래그 시작 전 지연 시간(ms) - distance : 드래그로 인식하기 위한 최소 이동 거리(px) - plugins : 사용할 플러그인 배열 - sensors : 사용할 센서 배열 (마우스, 터치 등) - classes : 드래그 상태별 CSS 클래스 커스터마이징 객체
Sortable 전용 옵션
-sortAnimation : 정렬 애니메이션 플러그인 설정 - swapAnimation : 교환 애니메이션 플러그인 설정
Mirror (미러 이미지) 옵션
-mirror.appendTo : 미러 요소를 추가할 부모 요소 - mirror.constrainDimensions : 미러의 크기를 원본과 동일하게 고정 (true/false) - mirror.xAxis : X축 이동만 허용 (true/false) - mirror.yAxis : Y축 이동만 허용 (true/false) - mirror.cursorOffsetX : 커서 X축 오프셋 - mirror.cursorOffsetY : 커서 Y축 오프셋
Scrollable (자동 스크롤) 옵션
-scrollable.speed : 자동 스크롤 속도 - scrollable.sensitivity : 스크롤 감지 영역 크기(px)
Classes (CSS 클래스 커스터마이징)
-classes.draggable : 드래그 가능한 요소에 적용될 클래스 - classes.mirror : 미러 요소에 적용될 클래스 - classes.source.dragging : 드래그 중인 원본 요소 클래스 - classes.source.placed : 드래그 완료 후 원본 요소 클래스 - classes.container.dragging : 드래그 중인 컨테이너 클래스 - classes.body.dragging : 드래그 중일 때 body에 적용될 클래스 - classes.draggable.over : 드래그 요소가 위에 있을 때 적용될 클래스
