Sortable

KO | EN

gitlite — search

#javascript #react #ai #typescript #llm #rust #macos #java #cli #kubernetes #awesome-list #security #openai #ios

(★ 31,168)

최신 브라우저와 터치 기기를 위한 드래그앤드롭 재정렬 가능 리스트. jQuery나 프레임워크가 필요하지 않습니다.

파일 탐색기

최종 버전 다운로드 (.zip)

- config.yml
- - bug-report.md
  - custom-template.md
  - feature-request.md
- entry-complete.js
- entry-core.js
- entry-defaults.js
- sortable.complete.esm.js
- sortable.core.esm.js
- sortable.esm.js
- - AutoScroll.js
  - index.js
  - README.md
- - index.js
  - MultiDrag.js
  - README.md
- - index.js
  - OnSpill.js
  - README.md
- - index.js
  - README.md
  - Swap.js
- README.md
- banner.js
- build.js
- esm-build.js
- minify.js
- test-compat.js
- test.js
- umd-build.js
- Animation.js
- BrowserInfo.js
- EventDispatcher.js
- PluginManager.js
- Sortable.js
- utils.js
- - frame.html
  - index.html
- - prettify.css
  - prettify.js
  - run_prettify.js
- app.js
- logo.png
- og-image.png
- saucelabs.svg
- theme.css
- dual-list.html
- empty-list.html
- filter.html
- handles.html
- nested.html
- single-list.html
- Sortable.compat.test.js
- Sortable.test.js
- style.css
.editorconfig
.gitignore
.jshintrc
.testcaferc.json
babel.config.js
bower.json
CONTRIBUTING.md
index.html
LICENSE
package-lock.json
package.json
README.md
Sortable.js
Sortable.min.js

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Sortable   [![Financial Contributors on Open Collective](https://opencollective.com/Sortable/all/badge.svg?label=financial+contributors)](https://opencollective.com/Sortable) [![CircleCI](https://circleci.com/gh/SortableJS/Sortable.svg?style=svg)](https://circleci.com/gh/SortableJS/Sortable) [![DeepScan grade](https://deepscan.io/api/teams/3901/projects/5666/branches/43977/badge/grade.svg)](https://deepscan.io/dashboard#view=project&tid=3901&pid=5666&bid=43977) [![](https://data.jsdelivr.com/v1/package/npm/sortablejs/badge)](https://www.jsdelivr.com/package/npm/sortablejs) [![npm](https://img.shields.io/npm/v/sortablejs.svg)](https://www.npmjs.com/package/sortablejs)
Sortable은 순서를 변경할 수 있는 드래그 앤 드롭 리스트를 위한 JavaScript 라이브러리입니다.
데모: http://sortablejs.github.io/Sortable/
[![](https://raw.githubusercontent.com/SortableJS/Sortable/HEAD/st/saucelabs.svg?sanitize=true)](https://saucelabs.com/)
## 특징
\* 터치 디바이스 및 [모던](http://caniuse.com/#search=drag) 브라우저 지원 (IE9 포함)
\* 리스트 간 또는 동일한 리스트 내에서 드래그 가능
\* 항목 이동 시 CSS 애니메이션 효과
\* 드래그 핸들 \*및 텍스트 선택\* 지원 (voidberg의 html5sortable보다 우수함)
\* 스마트 자동 스크롤
\* 고급 스왑 감지
\* 부드러운 애니메이션
\* [Multi-drag](https://github.com/SortableJS/Sortable/tree/master/plugins/MultiDrag) 지원
\* CSS transform 지원
\* 네이티브 HTML5 드래그 앤 드롭 API를 사용하여 빌드됨
\* 지원 프레임워크:
\* [Meteor](https://github.com/SortableJS/meteor-sortablejs)
\* Angular
\* [2.0+](https://github.com/SortableJS/angular-sortablejs)
\* [1.\*](https://github.com/SortableJS/angular-legacy-sortablejs)
\* React
\* [ES2015+](https://github.com/SortableJS/react-sortablejs)
\* [Mixin](https://github.com/SortableJS/react-mixin-sortablejs)
\* [Knockout](https://github.com/SortableJS/knockout-sortablejs)
\* [Polymer](https://github.com/SortableJS/polymer-sortablejs)
\* [Vue](https://github.com/SortableJS/Vue.Draggable)
\* [Ember](https://github.com/SortableJS/ember-sortablejs)
\* [Bootstrap](#bs) 등 모든 CSS 라이브러리 지원
\* 단순한 API
\* [플러그인](#plugins) 지원
\* [CDN](#cdn) 지원
\* jQuery 불필요 (하지만 [지원](https://github.com/SortableJS/jquery-sortablejs)은 제공함)
\* `@types/sortablejs`에서 타입스크립트 정의 제공
  
### 아티클
\* [Dragging Multiple Items in Sortable](https://github.com/SortableJS/Sortable/wiki/Dragging-Multiple-Items-in-Sortable) (2019년 4월 26일)
\* [Swap Thresholds and Direction](https://github.com/SortableJS/Sortable/wiki/Swap-Thresholds-and-Direction) (2018년 12월 2일)
\* [Sortable v1.0 — New capabilities](https://github.com/SortableJS/Sortable/wiki/Sortable-v1.0-—-New-capabilities/) (2014년 12월 22일)
\* [Sorting with the help of HTML5 Drag'n'Drop API](https://github.com/SortableJS/Sortable/wiki/Sorting-with-the-help-of-HTML5-Drag'n'Drop-API/) (2013년 12월 23일)
  
### 시작하기
NPM으로 설치:
```bash
npm install sortablejs --save
```
Bower로 설치:
```bash
bower install --save sortablejs
```
프로젝트에 임포트:
```js
// Default SortableJS
import Sortable from 'sortablejs';
// Core SortableJS (without default plugins)
import Sortable from 'sortablejs/modular/sortable.core.esm.js';
// Complete SortableJS (with all plugins)
import Sortable from 'sortablejs/modular/sortable.complete.esm.js';
```
필요한 플러그인 선택하여 가져오기:
```js
// Cherrypick extra plugins
import Sortable, { MultiDrag, Swap } from 'sortablejs';
Sortable.mount(new MultiDrag(), new Swap());
// Cherrypick default plugins
import Sortable, { AutoScroll } from 'sortablejs/modular/sortable.core.esm.js';
Sortable.mount(new AutoScroll());
```
---
### 사용법
```html

* item 1
* item 2
* item 3
```

```js
var el = document.getElementById('items');
var sortable = Sortable.create(el);
```
목록과 그 내부 요소로 `ul`/`li`뿐만 아니라 어떤 요소든 사용할 수 있습니다. [`div`를 사용한 예시](https://jsbin.com/visimub/edit?html,js,output)는 여기에서 확인할 수 있습니다.
---
### 옵션 (Options)
```js
var sortable = new Sortable(el, {
group: "name", // 또는 { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }
sort: true, // 목록 내에서 정렬 허용 여부
delay: 0, // 드래그가 시작되는 시점을 정의하는 시간 (밀리초)
delayOnTouchOnly: false, // 터치 사용 시에만 지연 적용
touchStartThreshold: 0, // 픽셀 단위, 지연된 드래그 이벤트를 취소하기 전에 포인터가 이동해야 하는 거리
disabled: true로 설정 시 sortable이 비활성화됨.
store: null, // @see Store 참조
animation: 150, // 밀리초, 정렬 시 아이템이 이동하는 애니메이션 속도, `0`은 애니메이션 없음
easing: "cubic-bezier(1, 0, 0, 1)", // 애니메이션 이징(Easing). 기본값은 null입니다. 예시는 https://easings.net/ 참고.
handle: ".my-handle", // 목록 아이템 내에서 드래그 핸들 셀렉터
filter: ".ignore-elements", // 드래그로 이어지지 않는 셀렉터 (문자열 또는 함수)
preventOnFilter: true, // `filter`가 트리거될 때 `event.preventDefault()` 호출
draggable: ".item", // 요소 내에서 어떤 아이템을 드래그 가능하게 할지 지정
dataIdAttr: 'data-id', // `toArray()` 메서드에서 사용하는 HTML 속성
ghostClass: "sortable-ghost", // 드롭될 자리에 표시되는 플레이스홀더의 클래스 이름
chosenClass: "sortable-chosen", // 선택된 아이템의 클래스 이름
dragClass: "sortable-drag", // 드래그 중인 아이템의 클래스 이름
swapThreshold: 1, // 스왑 영역의 임계값
invertSwap: true로 설정 시 항상 반전된 스왑 영역을 사용함.
invertedSwapThreshold: 1, // 반전된 스왑 영역의 임계값 (기본적으로 swapThreshold 값으로 설정됨)
direction: 'horizontal', // Sortable의 방향 (지정하지 않으면 자동으로 감지됨)
forceFallback: false, // HTML5 DnD 동작을 무시하고 폴백(fallback)을 강제로 실행
fallbackClass: "sortable-fallback", // forceFallback 사용 시 복제된 DOM 요소의 클래스 이름
fallbackOnBody: false, // 복제된 DOM 요소를 문서의 Body에 추가
fallbackTolerance: 0, // 드래그로 간주하기 위해 마우스가 이동해야 하는 거리를 픽셀 단위로 지정
dragoverBubble: false,
removeCloneOnHide: true, // 복제 요소를 단순히 숨기는 대신, 보이지 않을 때 제거
emptyInsertThreshold: 5, // 픽셀 단위, 빈 sortable에 드래그 요소를 삽입하기 위해 마우스가 떨어져 있어야 하는 거리
setData: function (/\*\* DataTransfer \*/dataTransfer, /\*\* HTMLElement\*/dragEl) {
dataTransfer.setData('Text', dragEl.textContent); // HTML5 DragEvent의 `dataTransfer` 객체
},
// 요소가 선택됨
onChoose: function (/\*\*Event\*/evt) {
evt.oldIndex; // 부모 내에서의 요소 인덱스
},
// 요소 선택이 해제됨
onUnchoose: function(/\*\*Event\*/evt) {
// onEnd와 동일한 속성
},
// 요소 드래그가 시작됨
onStart: function (/\*\*Event\*/evt) {
evt.oldIndex; // 부모 내에서의 요소 인덱스
},
// 요소 드래그가 종료됨
onEnd: function (/\*\*Event\*/evt) {
var itemEl = evt.item; // 드래그된 HTMLElement
evt.to; // 대상 목록
evt.from; // 이전 목록
evt.oldIndex; // 이전 부모 내에서의 요소의 이전 인덱스
evt.newIndex; // 새 부모 내에서의 요소의 새 인덱스
evt.oldDraggableIndex; // 드래그 가능한 요소만  oldCount에 포함한, 이전 부모 내에서의 요소의 이전 인덱스
evt.newDraggableIndex; // 드래그 가능한 요소만  oldCount에 포함한, 새 부모 내에서의 요소의 새 인덱스
evt.clone // 복제 요소
evt.pullMode; // 아이템이 다른 sortable에 있을 때: 복제 중인 경우 `"clone"`, 이동 중인 경우 `true`
},
// 다른 목록에서 이 목록으로 요소가 드롭됨
onAdd: function (/\*\*Event\*/evt) {
// onEnd와 동일한 속성
},
// 목록 내 정렬이 변경됨
onUpdate: function (/\*\*Event\*/evt) {
// onEnd와 동일한 속성
},
// 목록에 변경(추가 / 업데이트 / 제거)이 발생할 때 호출됨
onSort: function (/\*\*Event\*/evt) {
// onEnd와 동일한 속성
},
// 목록에서 요소가 제거됨

다른 목록으로 이동
onRemove: function (/\*\*Event\*/evt) {
// onEnd와 동일한 속성들
},
// 필터링된 요소 드래그 시도
onFilter: function (/\*\*Event\*/evt) {
var itemEl = evt.item; // `mousedown|tapstart` 이벤트를 받는 HTMLElement.
},
// 목록 내에서 또는 목록 간에 항목을 이동할 때 발생하는 이벤트
onMove: function (/\*\*Event\*/evt, /\*\*Event\*/originalEvent) {
// 예시: https://jsbin.com/nawahef/edit?js,output
evt.dragged; // 드래그 중인 HTMLElement
evt.draggedRect; // DOMRect {left, top, right, bottom}
evt.related; // 가이드된 HTMLElement
evt.relatedRect; // DOMRect
evt.willInsertAfter; // Sortable이 기본적으로 타겟 뒤에 드래그 요소를 삽입하는 경우 true인 불리언 값
originalEvent.clientY; // 마우스 위치
// return false; — 취소용
// return -1; — 타겟 앞에 삽입
// return 1; — 타겟 뒤에 삽입
// return true; — 방향에 따른 기본 삽입 지점 유지
// return void; — 방향에 따른 기본 삽입 지점 유지
},
// 요소의 복제본을 생성할 때 호출됨
onClone: function (/\*\*Event\*/evt) {
var origEl = evt.item;
var cloneEl = evt.clone;
},
// 드래그 중인 요소의 위치가 변경될 때 호출됨
onChange: function(/\*\*Event\*/evt) {
evt.newIndex // 이 이벤트가 사용되는 가장 유력한 이유는 드래그 중인 요소의 현재 인덱스를 가져오기 위함입니다.
// onEnd와 동일한 속성들
}
});
```
---
#### `group` 옵션
한 목록에서 다른 목록으로 요소를 드래그하려면 두 목록 모두 동일한 `group` 값을 가져야 합니다.
또한 목록이 요소를 내보내거나, 내보내고 복사본을 유지(`clone`)하거나, 요소를 받을 수 있는지 여부를 정의할 수 있습니다.
\* name: `String` — 그룹 이름
\* pull: `true|false|["foo", "bar"]|'clone'|function` — 목록에서 이동할 수 있는지 여부. `clone` — 이동하는 대신 항목을 복사합니다. 또는 요소가 배치될 수 있는 그룹 이름들의 배열. 기본값은 `true`입니다.
\* put: `true|false|["baz", "qux"]|function` — 다른 목록에서 요소를 추가할 수 있는지 여부, 또는 요소를 추가할 수 있는 그룹 이름들의 배열.
\* revertClone: `boolean` — 다른 목록으로 이동한 후 복제된 요소를 초기 위치로 되돌립니다.
데모:
- https://jsbin.com/hijetos/edit?js,output
- https://jsbin.com/nacoyah/edit?js,output — `pull` 및 `put`에서의 복잡한 로직 사용
- https://jsbin.com/bifuyab/edit?js,output — `revertClone: true` 사용
---
#### `sort` 옵션
목록 내부의 정렬을 허용합니다.
데모: https://jsbin.com/jayedig/edit?js,output
---
#### `delay` 옵션
정렬이 시작되어야 하는 시점을 정의하는 밀리초 단위의 시간입니다.
안타깝게도 브라우저 제약으로 인해 네이티브 드래그 앤 드롭을 사용하는 IE 또는 Edge에서는 지연이 불가능합니다.
데모: https://jsbin.com/zosiwah/edit?js,output
---
#### `delayOnTouchOnly` 옵션
사용자가 터치(예: 모바일 기기)를 사용하는 경우에만 지연을 적용할지 여부입니다. 다른 경우에는 지연이 적용되지 않습니다. 기본값은 `false`입니다.
---
#### `swapThreshold` 옵션
`0`과 `1` 사이의 부동 소수점으로, 스왑 영역이 타겟에서 차지하는 비율입니다.
[더 읽어보기](https://github.com/SortableJS/Sortable/wiki/Swap-Thresholds-and-Direction#swap-threshold)
데모: http://sortablejs.github.io/Sortable#thresholds
---
#### `invertSwap` option
항목 "사이"를 정렬하는 효과를 위해 스왑 영역을 타겟의 측면으로 설정하려면 `true`로 설정합니다.
[더 읽어보기](https://github.com/SortableJS/Sortable/wiki/Swap-Thresholds-and-Direction#forcing-inverted-swap-zone)
데모: http://sortablejs.github.io/Sortable#thresholds
---
#### `invertedSwapThreshold` 옵션
`0`과 `1` 사이의 부동 소수점으로, 반전된 스왑 영역이 타겟에서 차지하는 비율입니다. 주어지지 않으면 기본적으로 `swapThreshold`가 됩니다.
[더 읽어보기](https://github.com/SortableJS/Sortable/wiki/Swap-Thresholds-and-Direction#dealing-with-swap-glitching)
---
#### `direction` 옵션
Sortable이 정렬해야 하는 방향입니다. `'vertical'`, `'horizontal'` 또는 타겟 위로 드래그될 때마다 호출되는 함수로 설정할 수 있습니다. `'vertical'` 또는 `'horizontal'`을 반환해야 합니다.
[더 읽어보기](https://github.com/SortableJS/Sortable/wiki/Swap-Thresholds-and-

[Direction](#direction)
전체 열(full column) 및 반 열(half column) 요소를 모두 포함하는 수직 리스트에 대한 방향(direction) 감지 예시:
```js
Sortable.create(el, {
direction: function(evt, target, dragEl) {
if (target !== null && target.className.includes('half-column') && dragEl.className.includes('half-column')) {
return 'horizontal';
}
return 'vertical';
}
});
```
---
#### `touchStartThreshold` 옵션
이 옵션은 `fallbackTolerance` 옵션과 유사합니다.
`delay` 옵션이 설정되어 있을 때, Samsung Galaxy S8과 같이 터치 디스플레이가 매우 민감한 일부 휴대폰에서는 손가락이 움직이지 않는데도 원하지 않는 touchmove 이벤트가 발생하여 정렬이 트리거되지 않는 문제가 발생할 수 있습니다.
이 옵션은 지연된 정렬이 취소되기 전에 발생해야 하는 최소 포인터 이동 거리를 설정합니다.
3에서 5 사이의 값이 적당합니다.
---
#### `disabled` 옵션
`true`로 설정하면 Sortable을 비활성화합니다.
데모: https://jsbin.com/sewokud/edit?js,output
```js
var sortable = Sortable.create(list);
document.getElementById("switcher").onclick = function () {
var state = sortable.option("disabled"); // 가져오기
sortable.option("disabled", !state); // 설정하기
};
```
---
#### `handle` 옵션
리스트 항목을 드래그 가능하게 만들기 위해, Sortable은 사용자의 텍스트 선택을 비활성화합니다.
이것이 항상 바람직한 것은 아닙니다. 텍스트 선택을 허용하려면 드래그 핸들을 정의하세요. 핸들은 각 리스트 요소 내에서 드래그를 허용하는 영역을 의미합니다.
데모: https://jsbin.com/numakuh/edit?html,js,output
```js
Sortable.create(el, {
handle: ".my-handle"
});
```
```html

* :: list item text one
* :: list item text two

```css
.my-handle {
cursor: move;
cursor: -webkit-grabbing;
}
```
---
#### `filter` 옵션
```js
Sortable.create(list, {
filter: ".js-remove, .js-edit",
onFilter: function (evt) {
var item = evt.item,
ctrl = evt.target;
if (Sortable.utils.is(ctrl, ".js-remove")) { // 삭제 버튼 클릭 시
item.parentNode.removeChild(item); // sortable 아이템 삭제
}
else if (Sortable.utils.is(ctrl, ".js-edit")) { // 수정 링크 클릭 시
// ...
}
}
})
```
---
#### `ghostClass` 옵션
드롭 플레이스홀더의 클래스 이름 (기본값 `sortable-ghost`).
데모: https://jsbin.com/henuyiw/edit?css,js,output
```css
.ghost {
opacity: 0.4;
}
```
```js
Sortable.create(list, {
ghostClass: "ghost"
});
```
---
#### `chosenClass` 옵션
선택된 아이템의 클래스 이름 (기본값 `sortable-chosen`).
데모: https://jsbin.com/hoqufox/edit?css,js,output
```css
.chosen {
color: #fff;
background-color: #c00;
}
```
```js
Sortable.create(list, {
delay: 500,
chosenClass: "chosen"
});
```
---
#### `forceFallback` 옵션
`true`로 설정하면, HTML5 브라우저를 사용 중이더라도 HTML5를 지원하지 않는 브라우저용 Fallback이 사용됩니다.
이를 통해 최신 브라우저에서도 구형 브라우저에서의 동작을 테스트하거나, 데스크톱, 모바일, 구형 브라우저 간의 Drag 'n Drop 느낌을 더 일관되게 만들 수 있습니다.
또한 Fallback은 항상 해당 DOM 엘리먼트의 복사본을 생성하고 옵션에 정의된 `fallbackClass` 클래스를 추가합니다. 이 동작을 통해 '드래그되는' 엘리먼트의 외관을 제어할 수 있습니다.
데모: https://jsbin.com/sibiput/edit?html,css,js,output
---
#### `fallbackTolerance` 옵션
네이티브 드래그 임계값을 에뮬레이트합니다. 드래그로 간주하기 위해 마우스가 이동해야 하는 거리를 픽셀 단위로 지정합니다.
링크 목록처럼 아이템을 클릭할 수도 있는 경우에 유용합니다.
sortable 엘리먼트 안에서 사용자가 클릭할 때, 누르는 순간과 손을 떼는 순간 사이에 손이 약간 움직이는 것은 드문 일이 아닙니다.
클래스 클릭할 때마다 실수로 드래그가 시작되지 않도록, 포인터를 특정 허용 오차 이상 움직여야만 드래그가 시작됩니다.
3에서 5 사이의 값이 적당합니다.
---
#### `dragoverBubble` 옵션
`true`로 설정하면, dragover 이벤트가 상위 sortable들로 버블링됩니다. Fallback 및 네이티브 dragover 이벤트 모두에서 작동합니다.
기본값은 false이지만, Sortable은 엘리먼트가 상위 Sortable에 삽입되거나, 혹은 특정 시점에는 삽입되지 않더라도(애니메이션 등으로 인해) 상위 Sortable에 삽입될 *수* 있는 경우에만 이벤트 버블링을 중단합니다.
1.8.0 버전 이후부터는 이 옵션을 기본값인 false로 두는 것이 좋습니다. 1.8.0 이전 버전에서는 중첩된 sortable이 작동하려면 이 옵션이 `true`여야 했을 수 있습니다.
---
#### `removeCloneOnHide` 옵션
`false`로 설정하면, 복사본의 CSS `display` 속성을 `none`으로 설정하여 숨깁니다.
기본값은 `true`이며, 이는 숨겨야 할 때 Sortable이 DOM에서 복사된 엘리먼트를 완전히 제거함을 의미합니다.
---
#### `emptyInsertThreshold` 옵션
드래그 중인 엘리먼트가 빈 sortable 내부로 삽입되기 위해 마우스가 빈 sortable로부터 떨어져 있어야 하는 거리(픽셀 단위)입니다. 기본값은 `5`입니다. 이 기능을 비활성화하려면 `0`으로 설정하세요.
데모: https://jsbin.com/becavoj/edit?js,output
이 옵션의 대안으로 목록이 비어 있을 때 패딩을 설정하는 방법이 있습니다.
예시:
```css
ul:empty {
padding-bottom: 20px;
}
```
경고: `:empty`가 작동하려면 내부에 노드가 전혀 없어야 합니다(텍스트 노드조차 없어야 함).
데모:
https://jsbin.com/yunakeg/edit?html,css,js,output
---
### Event 객체 ([데모](https://jsbin.com/fogujiv/edit?js,output))
- to:`HTMLElement` — 엘리먼트가 이동한 목록
- from:`HTMLElement` — 이전 목록
- item:`HTMLElement` — 드래그된 엘리먼트
- clone:`HTMLElement`
- oldIndex:`Number|undefined` — 부모 내에서의 이전 인덱스
- newIndex:`Number|undefined` — 부모 내에서의 새로운 인덱스
- oldDraggableIndex: `Number|undefined` — 드래그 가능한 엘리먼트만 센 부모 내에서의 이전 인덱스
- newDraggableIndex: `Number|undefined` — 드래그 가능한 엘리먼트만 센 부모 내에서의 새로운 인덱스
- pullMode:`String|Boolean|undefined` — 드래그 중인 경우의 Pull 모드
```

o 또 다른 sortable (`"clone"`, `true` 또는 `false`), 그렇지 않으면 undefined
#### `move` 이벤트 객체
- to:`HTMLElement`
- from:`HTMLElement`
- dragged:`HTMLElement`
- draggedRect:`DOMRect`
- related:`HTMLElement` — 가이드가 위치한 요소
- relatedRect:`DOMRect`
- willInsertAfter:`Boolean` — 대상 요소 뒤에 삽입되는 경우 `true` (앞에 삽입되는 경우 `false`)
---
### 메서드
##### option(name:`String`[, value:`\*`]):`\*`
옵션을 가져오거나 설정합니다.
##### closest(el:`HTMLElement`[, selector:`String`]):`HTMLElement|null`
세트의 각 요소에 대해, 요소 자체를 테스트하고 DOM 트리의 조상들을 거슬러 올라가며 선택자와 일치하는 첫 번째 요소를 가져옵니다.
##### toArray():`String[]`
sortable의 항목 `data-id` (`dataIdAttr` 옵션)들을 문자열 배열로 직렬화합니다.
##### sort(order:`String[]`, useAnimation:`Boolean`)
배열에 따라 요소를 정렬합니다.
```js
var order = sortable.toArray();
sortable.sort(order.reverse(), true); // 적용
```
##### save()
현재 정렬 상태를 저장합니다 ([store](#store) 참고).
##### destroy()
sortable 기능을 완전히 제거합니다.
---
### Store
정렬 상태를 저장하고 복원합니다.
```html

* order
* save
* restore

```js
Sortable.create(el, {
group: "localStorage-example",
store: {
/**
* Get the order of elements. Called once during initialization.
* @param {Sortable} sortable
* @returns {Array}
*/
get: function (sortable) {
var order = localStorage.getItem(sortable.options.group.name);
return order ? order.split('|') : [];
},
/**
* Save the order of elements. Called onEnd (when the item is dropped).
* @param {Sortable} sortable
*/
set: function (sortable) {
var order = sortable.toArray();
localStorage.setItem(sortable.options.group.name, order.join('|'));
}
}
})
```
---
### Bootstrap
Demo: https://jsbin.com/visimub/edit?html,js,output
```html
<ul id="items" class="list-group">
  <li class="list-group-item">This is <a href="http://SortableJS.github.io/Sortable/">Sortable</a></li>
  <li class="list-group-item">It works with Bootstrap...</li>
  <li class="list-group-item">...out of the box.</li>
  <li class="list-group-item">It has support for touch devices.</li>
  <li class="list-group-item">Just drag some elements around.</li>
</ul>
```

---
### 정적 메서드 및 프로퍼티
##### Sortable.create(el:`HTMLElement`[, options:`Object`]):`Sortable`
새로운 인스턴스를 생성합니다.
---
##### Sortable.active:`Sortable`
활성화된 Sortable 인스턴스입니다.
---
##### Sortable.dragged:`HTMLElement`
드래그되고 있는 요소입니다.
---
##### Sortable.ghost:`HTMLElement`
고스트 요소입니다.
---
##### Sortable.clone:`HTMLElement`
복제된 요소입니다.
---
##### Sortable.get(element:`HTMLElement`):`Sortable`
요소에 부착된 Sortable 인스턴스를 가져옵니다.
---
##### Sortable.mount(plugin:`...SortablePlugin|SortablePlugin[]`)
Sortable에 플러그인을 마운트합니다.
---
##### Sortable.utils
\* on(el`:HTMLElement`, event`:String`, fn`:Function`) — 이벤트 핸들러 함수를 연결합니다.
\* off(el`:HTMLElement`, event`:String`, fn`:Function`) — 이벤트 핸들러를 제거합니다.
\* css(el`:HTMLElement`)`:Object` — 모든 CSS 프로퍼티의 값을 가져옵니다.
\* css(el`:HTMLElement`, prop`:String`)`:Mixed` — 스타일 프로퍼티의 값을 가져옵니다.
\* css(el`:HTMLElement`, prop`:String`, value`:String`) — 하나의 CSS 프로퍼티를 설정합니다.
\* css(el`:HTMLElement`, props`:Object`) — 여러 개의 CSS 프로퍼티를 설정합니다.
\* find(ctx`:HTMLElement`, tagName`:String`[, iterator`:Function`])`:Array` — 태그 이름으로 요소를 가져옵니다.
\* bind(ctx`:Mixed`, fn`:Function`)`:Function` — 함수를 받아 항상 특정 컨텍스트를 갖는 새로운 함수를 반환합니다.
\* is(el`:HTMLElement`, selector`:String`)`:Boolean` — 현재 일치하는 요소 집합이 셀렉터와 일치하는지 확인합니다.
\* closest(el`:HTMLElement`, selector`:String`[, ctx`:HTMLElement`])`:HTMLElement|Null` — 집합의 각 요소에 대해, 요소 자체를 테스트하고 DOM 트리의 조상들을 탐색하여 셀렉터와 일치하는 첫 번째 요소를 가져옵니다.
\* clone(el`:HTMLElement`)`:HTMLElement` — 일치하는 요소 집합의 깊은 복사본을 생성합니다.
\* toggleClass(el`:HTMLElement`, name`:String`, state`:Boolean`) — 각 요소에서 클래스를 추가하거나 제거합니다.
\* detectDirection(el`:HTMLElement`)`:String` — 요소의 [방향](https://github.com/SortableJS/Sortable/wiki/Swap-Thresholds-and-Direction#direction)을 `'vertical'` 또는 `'horizontal'`로 자동 감지합니다.
\* index(el`:HTMLElement`, selector`:String`)`:Number` — 선택된 요소 집합에 대해 부모 요소 내에서의 인덱스를 반환합니다.
\* getChild(el`:HTMLElement`, childNum`:Number`, options`:Object`, includeDragEl`:Boolean`):`HTMLElement` — Sortable 인스턴스 내의 드래그 가능한 요소들 중 지정된 인덱스에 있는 드래그 가능한 요소를 가져옵니다.
\* expando`:String` — 내부적으로 사용되는 expando 프로퍼티 이름이며, sortableListElement[expando]는 해당 요소의 Sortable 인스턴스를 반환합니다.
---
### 플러그인
#### 추가 플러그인 (전체 버전에 포함됨)
- [MultiDrag](https://github.com/SortableJS/Sortable/tree/master/plugins/MultiDrag)
- [Swap](https://github.com/SortableJS/Sortable/tree/master/plugins/Swap)
#### 기본 플러그인 (기본 버전에 포함됨)
- [AutoScroll](https://github.com/SortableJS/Sortable/tree/master/plugins/AutoScroll)
- [OnSpill](https://github.com/SortableJS/Sortable/tree/master/plugins/OnSpill)
---
### CDN
```html
```
---
### 기여하기 (이슈/PR)
[이 문서](CONTRIBUTING.md)를 읽어주세요.
---
## 기여자들
### 코드 기여자
이 프로젝트는 기여해주신 모든 분들 덕분에 존재합니다. [[기여하기](CONTRIBUTING.md)].
[![](https://opencollective.com/Sortable/contributors.svg?width=890&button=false)](https://github.com/SortableJS/Sortable/graphs/contributors)
### 재정적 기여자
재정적 기여자가 되어 커뮤니티를 지속할 수 있도록 도와주세요. [[기여하기](https://opencollective.com/Sortable/contribute)]
#### 개인
[![](https://opencollective.com/Sortable/individuals.svg?width=890)](https://opencollective.com/Sortable)
#### 단체
조직으로 이 프로젝트를 지원하세요. 여기에 로고와 웹사이트 링크가 표시됩니다. [[기여하기](https://opencollective.com/Sortable/contribute)]
[![](https://opencollective.com/Sortable/organization/0/avatar.svg)](https://opencollective.com/Sortable/organization/0/website)
[![](htt

ps://opencollective.com/Sortable/organization/1/avatar.svg)](https://opencollective.com/Sortable/organization/1/website)
[![](https://opencollective.com/Sortable/organization/2/avatar.svg)](https://opencollective.com/Sortable/organization/2/website)
[![](https://opencollective.com/Sortable/organization/3/avatar.svg)](https://opencollective.com/Sortable/organization/3/website)
[![](https://opencollective.com/Sortable/organization/4/avatar.svg)](https://opencollective.com/Sortable/organization/4/website)
[![](https://opencollective.com/Sortable/organization/5/avatar.svg)](https://opencollective.com/Sortable/organization/5/website)
[![](https://opencollective.com/Sortable/organization/6/avatar.svg)](https://opencollective.com/Sortable/organization/6/website)
[![](https://opencollective.com/Sortable/organization/7/avatar.svg)](https://opencollective.com/Sortable/organization/7/website)
[![](https://opencollective.com/Sortable/organization/8/avatar.svg)](https://opencollective.com/Sortable/organization/8/website)
[![](https://opencollective.com/Sortable/organization/9/avatar.svg)](https://opencollective.com/Sortable/organization/9/website)
## MIT 라이선스
본 소프트웨어 및 관련 문서 파일(이하 "소프트웨어")의 사본을 얻는 모든 사람에게 무료로 권한이 부여되며, 사용, 복사, 수정, 병합, 게시, 배포, 서브라이선스 허가 및/또는 소프트웨어 사본 판매를 포함하되 이에 제한되지 않는 소프트웨어 내의 권리를 제한 없이 행사할 수 있으며, 소프트웨어가 제공된 사람들에게 이를 허용할 수 있습니다. 단, 다음 조건이 충족되어야 합니다.

본 소프트웨어는 상품성, 특정 목적에의 적합성 및 비침해에 대한 보증을 포함하되 이에 국한되지 않고 명시적이거나 묵시적인 어떠한 보증도 없이 "있는 그대로" 제공됩니다. 어떠한 경우에도 저작자나 저작권자는 계약, 불법행위 또는 기타 사유로 인해 소프트웨어와 관련하여 또는 소프트웨어의 사용이나 기타 거래로 인해 발생하는 어떠한 청구, 손해 또는 기타 책임에 대해서도 책임을 지지 않습니다.

Sortable

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Sortable

파일 탐색기

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README