リストやテーブルの用をの順番をドラッグ&ドロップで入れ替える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();
});

iOSでのセレクトリストの代わりになる?

こういった項目の順序入れ替えにはセレクトリストを使用する場合が多いかと思いますが、iOSのSafariではセレクトリストの表示がロール式になっており、順序を入れ替えるという使い方では非常に見にくいことになります。

項目の順序を入れ替えるという目的であれば、こちらで代用できそうです。

参考にしたサイト

【jQuery】iPad・iPnoneにも対応!ドラッグ&ドロップで移動できるリストを作る方法


以上、よっしー (michimani) でした。

Share to ...

0

Follow on Feedly

comments powered by Disqus