問題 × 解決策

jQuery UIのSortableを使ってドラッグで順番を変える方法

問題

ドラッグで要素の順番を変えられるようにするには?

解決策

jQuery UIのSortableを使う。

 

ドラッグで順番を変える。

jQuery UIを駆使すると、様々な操作性を生み出すことができます。
今回はjQuery UIのSortableを使ってドラッグで順番を変える方法をご紹介します。

DEMOはこちら

項目01 内容01
項目02 内容02
項目03 内容03
項目04 内容04
項目05 内容05
  • 項目01
  • 項目02
  • 項目03
  • 項目04
  • 項目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

<div class="drag-box">
<table class="type02 dragtable">
    <tbody>
        <tr id="num01">
            <th scope="row">項目01</th>
            <td>内容01</td>
        </tr>
        <tr id="num02">
            <th scope="row">項目02</th>
            <td>内容02</td>
        </tr>
        <tr id="num03">
            <th scope="row">項目03</th>
            <td>内容03</td>
        </tr>
        <tr id="num04">
            <th scope="row">項目04</th>
            <td>内容04</td>
        </tr>
        <tr id="num05">
            <th scope="row">項目05</th>
            <td>内容05</td>
        </tr>
    </tbody>
</table>
</div>

CSS

ドラッグ時のcssを設定します。

.drag{
    background-color: #f9f9f9;
    border: dotted 2px #F15A24;
}

javascript

$(ドラッグで移動させたい要素の親要素).sortable()」でjQuery UIのSortableを実行することができます。

$('.dragtable tbody').sortable({
    opacity: 0.5,
    placeholder: "drag",
    axis: 'y'
});

ポイント!

  • jQuery UIのSortableのオプションで「placeholder」を設定すると、ドラッグ時に空白のエリアにクラス名を持たせることができます。

リストの場合

次にリストの場合の構築の流れです。

HTML

<div class="drag-box">
<ul class="draglist">
	<li id="numlist01">項目01</li>
	<li id="numlist02">項目02</li>
	<li id="numlist03">項目03</li>
	<li id="numlist04">項目04</li>
	<li id="numlist05">項目05</li>
</ul>
</div>

CSS

.drag{
    background-color: #f9f9f9;
    border: dotted 2px #F15A24;
}
.draglist > li{
	margin-bottom: 5px;
	padding: 5px 10px;
    background-color: #fef2ef;
    border: solid 1px #F15A24;
}

javascript

$('.draglist').sortable({
    opacity: 0.5,
    placeholder: "drag",
    axis: 'y'
});

参照

【jQuery UIのSortableを使ってみる | cly7796.net】
http://cly7796.net/wp/javascript/try-the-sortable-of-jquery-ui/

コメント

コメントを残す

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

one × 1 =

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

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