개시하다

테이블을 드래그 앤 드롭으로 다시 배열해야 하지만 좋은 도서관SortableJS이 있는지 찾아보면 사용하기 편해서 소개해 드리려고 합니다.

설치하다.

npm

npm install sortablejs

CDN도 있고요.

<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>

사용법

정렬하고 싶은 요소를 준비하세요.
※ 이해하기 쉽도록bootstrap을 통해 css 적용
html

<table class="table table-bordered w-25">
    <tbody id="sort-table">
    <tr><td>１行目</td></tr>
    <tr><td>2行目</td></tr>
    <tr><td>3行目</td></tr>
    </tbody>
</table>

js를 통해 준비된 ""요소를 Sortable JS로 설정합니다.
js

// 以下のいずれかでSortableJSを読み込みます
// CDNの場合は不要です
import Sortable from 'sortablejs';
const Sortable = require('sortablejs/Sortable');

// html要素を取得をしてSortableJSに設定します
const sortElement = document.getElementById('sort-table');
Sortable.create(sortElement);

이것만 다시 배열할 수 있다.

) 요소는 테이블 탭 이외의 곳에서 사용할 수 있습니다.
ul, li 태그
html

<ul id="sort-table">
    <li>1行目</li>
    <li>2行目</li>
    <li>3行目</li>
</ul>

div 태그
html

<div id="sort-table">
    <div>1行目</div>
    <div>2行目</div>
    <div>3行目</div>
</div>

나는 이렇게 사용하지 않을 것이라고 생각하지만, 아래의 하위 요소가 다른 라벨을 사용할 수 있다.
html

<div id="sort-table">
    <p>1行目</p>
    <div>2行目</div>
    <section>3行目</section>
</div>

옵션

Sortable JS에는 옵션가 있는데 이를 이용하여 간단하게 기능을 확장할 수 있다.
js

const sortElement = document.getElementById('sort-table');
Sortable.create(sortElement, {
    handle: '.handle', // ドラッグのトリガーをセレクタで指定します
    chosenClass: 'chosen', // ドラッグで選択中の要素に付与するクラス名
    animation: 200, // ドラッグして並び替える時のアニメーションの速さを指定します
});

css

<style>
    .chosen {
        background-color: #e0ffff;
    }
</style>

html

<table class="table table-bordered w-25">
    <tbody id="sort-table">
    <tr><td><button class="handle">:</button>１行目</td></tr>
    <tr><td><button class="handle">:</button>2行目</td></tr>
    <tr><td><button class="handle">:</button>3行目</td></tr>
    </tbody>
</table>

총결산

SortableJS를 사용하여 테이블을 드래그 앤 드롭하여 쉽게 정렬할 수 있습니다.
공식 프레젠테이션 페이지 다른 샘플도 많고 많이 만들 수 있을 거예요.