リスト、テーブルの要素をドラッグ&ドロップで移動できるようにする

2017-02-16

リストやテーブルの用をの順番をドラッグ&ドロップで入れ替えるUIがよくありますが、その実装方法が思ったより簡単でした。
iPhone, iPadでも移動できます。

必要なjsファイル

書き方(リストの場合)

<ul id="sortable-list">
    <li>ドラッグ</li>
    <li>アンド</li>
    <li>ドロップ</li>
    <li>移動できる</li>
    <li>リストです</li>
</ul>

ulに指定するidは任意です。

$(function() {
    $('#sortable-list').sortable({
        items: 'li',
        cursor: 'move',
        opacity: 0.5
    });
$('#sortable-first').disableSelection();
});

各オプションの意味ですが、
items ・・・移動させる要素 cursor ・・・要素を掴んでいるときにアイコンのようなものを表示するかどうか opacity・・・掴んでいる要素を透過させるかどうかという感じです。

書き方(テーブルの場合)

<table id="sortable-table">
    <tr>
        <td>ドラッグ</td>
    </tr>
    <tr>
        <td>アンド</td>
    </tr>
    <tr>
        <td>ドロップ</td>
    </tr>
    <tr>
        <td>移動できる</td>
    </tr>
    <tr>
        <td>テーブルです</td>
    </tr>
</table>

$(function() {
    $('#sortable-table').sortable({
        items: 'tr',
        cursor: 'move',
        opacity: 0.5
    });
    $('#sortable-first').disableSelection();
});