問題
ドラッグで要素の順番を変えられるようにするには？
解決策
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/
コメント