問題 × 解決策

jQuery UIのSortableのtoArrayでドラッグ後の順番を取得する方法

問題

jQuery UIのSortableでドラッグ後の順番を取得するには?

解決策

jQuery UIのSortableのオプションで「update」でfunctionを用意し、「$(this).sortable( 'toArray' )」で取得することができます。

 

ドラッグ後の要素の順番を取得して、次の処理につなげたい。

jQuery UIのSortableで、ドラッグ後の要素の順番を取得して、データベースの登録などに活用できるようにするために、今回はjQuery UIのSortableのtoArrayでドラッグ後の順番を取得する方法をご紹介します。

DEMOはこちら

行のID 項目 内容
num01 項目01 内容01
num02 項目02 内容02
num03 項目03 内容03
num04 項目04 内容04
num05 項目05 内容05

現在の順番の表示:

CDNを利用して、jQuery UIを読み込みます。

CDNを利用して、jQuery UIを読み込みます。

<head>
...
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/base/jquery-ui.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
...
</head>

HTML

ドラッグ対象の要素全てにid属性を設定します。
そしてドラッグ後の順番の情報の表示用として、クラス「toarray_text」を用意します。

<div class="drag-box">
<table class="type03 dragtable">
	<thead>
		<tr>
			<th scope="col"></th>
			<th scope="col">行のID</th>
			<th scope="col">項目</th>
			<th scope="col">内容</th>
		</tr>
	</thead>
    <tbody>
        <tr id="num01">
            <th scope="row"><span class="dragicon"></span></th>
            <td>num01</td>
            <td>項目01</td>
            <td>内容01</td>
        </tr>
        <tr id="num02">
            <th scope="row"><span class="dragicon"></span></th>
            <td>num02</td>
            <td>項目02</td>
            <td>内容02</td>
        </tr>
        <tr id="num03">
            <th scope="row"><span class="dragicon"></span></th>
            <td>num03</td>
            <td>項目03</td>
            <td>内容03</td>
        </tr>
        <tr id="num04">
            <th scope="row"><span class="dragicon"></span></th>
            <td>num04</td>
            <td>項目04</td>
            <td>内容04</td>
        </tr>
        <tr id="num05">
            <th scope="row"><span class="dragicon"></span></th>
            <td>num05</td>
            <td>項目05</td>
            <td>内容05</td>
        </tr>
    </tbody>
</table>
<p>現在の順番の表示:<span class="toarray_text"></span></p>
</div>

CSS

ドラッグの領域用であるクラス「dragicon」とドラッグ時のcssを設定します。


.dragicon{
    display: inline-block;
    width: 30px;
    height: 30px;
    background-color: #ffffff;
    background-image: url("../images/common/anchor-drag.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 14px auto;
    border: 1px solid #F15A24;
    border-radius: 50%;
    cursor: move;
}
.dragicon:hover{
    background-color: #fef2ef;
}
.drag{
    background-color: #f9f9f9;
    border: dotted 2px #F15A24;
}

javascript

jQuery UIのSortableのオプションで「update」でfunctionを用意し、「$(this).sortable( ‘toArray’ )」で取得することができます。

$('.dragtable tbody').sortable({
    opacity: 0.5,
    placeholder: "drag",
    handle: '.dragicon',
    axis: 'y',
    update: function( event, ui ) {
        var updateRows = $(this).sortable( 'toArray' ).join( ',' );
		$(this).closest('.drag-box').find('.toarray_text').text( updateRows );
    }
});

ポイント!

  • toArray」では、ドラッグ対象の要素のid属性を元に取得するので、事前にドラッグ対象の要素全てにid属性を設定する必要があります。

参照

【jQuery UI の sortable の toArray は、id だから。 – Oboe吹きプログラマの黙示録】
https://oboe2uran.hatenablog.com/entry/2015/11/20/190146

コメント

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

nineteen − 5 =

「問題 × 解決策」
月別アーカイブ一覧

「問題 × 解決策」
月別アーカイブ一覧