[라이브러리] Sortable - drag & drop (multiDrag)

MultiDrag

 

MultiDrag Plugin

이 플러그인을 통해 사용자는 다른 리스트에 있는 항목을 선택하고 다른 한 항목으로 끌 수 있다. 일단 배치되면, 아이템들은 원래 순서대로 펼쳐지지만, 새로운 위치에서는 배치해준 그대로 나란히 펼쳐진다. multidrag는 사용자가 정렬 가능한 목록 내에서 한 번에 여러 항목을 선택하고 여러 목록 또는 동일한 목록 내에서 하나의 항목으로 끌 수 있다. 

 

---

Mount the Plugin

멀티 드래그는 정렬 가능한 JS의 플러그인이며, 정렬 가능한 모든 빌드에 포함되지는 않는다. 기본 Sortable.js 파일에서는 즉시 사용할 수 있지만, 모듈식 빌드에서는 기본적으로 마운트되지 않는다. 모듈식 빌드에서 마운트 하려면 다음코드를 사용하여야 한다.

import { Sortable, MultiDrag } from 'sortablejs';
Sortable.mount(new MultiDrag());

 

---

Behavior

Selection

다중 드래그가 가능하려면 드래그가 시작되기 전에 사용자가 정렬 테이블 내에서 여러 항목을 선택할 수 있는 방법이 있어야 한다. 사용자가 항목 중 하나를 끌기 시작하면 이러한 항목이 모두 함께 끌어온다. 항목을 선택하려면 사용자가 항목을 클릭하기만 하면 된다. 선택한 항목의 선택을 취소 하려면 해당 항목을 다시 클릭하면 선택이 취소된다.

 

또한, 사용자는 한 번에 여러 항목을 선택해 정렬 가능하다. SHIFT 키를 누른 상태에서 목록의 항목을 클릭하면 마지막으로 선택한 항목부터 클릭한 항목까지 목록의 모든 항목이 선택된다. 이것은 윈도우 파일 탐색기와 같은 UI 시스템의 "선택에 추가" 기능(CTRL 키를 누르고 한 선택)에서 SHIFT 키 기능과 같다. 선택 항목에 추가 키의 기능을 같게 하는 키를 설정하려면 multiDragKey 옵션을 사용한다.

 

Drag

선택한 모든 항목을 끄려면 선택한 항목 중 하나를 끌어와야 한다. 그런 다음 항목을 삭제할 때까지 선택한 모든 항목이 사라진다. (애니메이션을 활성화된 경우 사용자가 드래그 하는 하나의 선택된 항목으로 "fold"한다.

 

Dropping

마지막으로, 항목이 목록에서 삭제되면 해당 항목과 함께 끌어온 모든 선택된 항목이 삭제된 위치에서 서로 나란히 원래 순서로 "unfolded"된다. 사용자가 드래그하기로 선택한 특정 항목은 항목의 최종 순서에 영향을 미치지 않는다.

---

Options

new Sortable(el, {
	multiDrag: true, // Enable the plugin
	selectedClass: "sortable-selected", // Class name for selected item
	multiDragKey: null, // Key that must be down for items to be selected
	avoidImplicitDeselect: false, // true - if you don't want to deselect items on outside click
	
	// Called when an item is selected
	onSelect: function(/**Event*/evt) {
		evt.item // The selected item
	},

	// Called when an item is deselected
	onDeselect: function(/**Event*/evt) {
		evt.item // The deselected item
	}
});

 

1. multiDragKey option

여러 항목을 선택하기 위한 키이다. 디폴트값은 null이다. 즉, 키가 눌리지 않아야 한다. CTRL 키와 같은 특수 키의 경우 옵션을 "CTRL"이라고 지정하면된다.(대소문자 구분 없음)

 

2. selectedClass option

multiDrag가 활성화된 경우, 선택한 항목의 클래스 이름이다. 디폴트값은 정렬 가능으로 선택된다.

.selected {
  background-color: #f9c7c8;
  border: solid red 1px;
}

Sortable.create(list, {
  multiDrag: true,
  selectedClass: "selected"
});

 

---

Event Properties

- items: HTMLElement[ ] --- 선택한 항목의 배열 또는 빈 항목

- clones: HTMLElement[ ] --- 클론 배열 또는 빈 배열

- oldIndicies: Index[ ] --- 선택한 요소의 이전 인덱스에 대한 정보를 포함하는 배열

- newIndicies: Index[ ] --- 선택한 요소의 새 인덱스에 대한 정보를 포함하는 배열

 

Index Object

- element: HTMLElement --- 인덱스가 제공되는 요소

- index: Number --- 요소의 인덱스

 

Note on newIndicies (새 인덱스에 대한 참고)

정렬 중에 발생한는 이벤트의 경우 끌어온 주 요소가 아닌 선택한 요소의 인덱스는 -1로 지정된다. 이는 DOM에서 제거되었거나(끌어진 요소로 접히는) 접는 애니메이션에 있으며 이 애니메이션이 완료되고 난 후 제거되기 때문이다.

 

---

Sortable.utils

- select(el: HTMLElement) --- 지정된 다중 드래그 항목을 선택

- deselect(el: HTMLElement) --- 지정된 다중 드래그 항목의 선택을 취소한다.

 

 

---

참고

GitHub - SortableJS/Sortable: Reorderable drag-and-drop lists for modern browsers and touch devices. No jQuery or framework requ

 

Dragging Multiple Items in Sortable