# 설명
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 : 드래그 요소가 위에 있을 때 적용될 클래스
주요이벤트
- drag:start : 드래그 시작 시
- drag:move : 드래그 중 이동 시
- drag:stop : 드래그 종료 시
- sortable:start : 정렬 시작 시 (Sortable)
- sortable:sort : 정렬 중 (Sortable)
- sortable:sorted : 정렬 완료 시 (Sortable)
- sortable:stop : 정렬 종료 시 (Sortable)
- swappable:start : 교환 시작 시 (Swappable)
- swappable:swap : 교환 중 (Swappable)
- swappable:swapped : 교환 완료 시 (Swappable)
- swappable:stop : 교환 종료 시 (Swappable)
- droppable:start : 드롭 시작 시 (Droppable)
- droppable:dropped : 드롭 완료 시 (Droppable)
- droppable:returned : 원래 위치로 복귀 시 (Droppable)
- droppable:stop : 드롭 종료 시 (Droppable)
- mirror:created : 미러 생성 시
- mirror:attached : 미러 부착 시
- mirror:move : 미러 이동 시
- mirror:destroy : 미러 제거 시
# 사용 예시
|
