小金井にあるWEB制作会社の備忘録

MEMORANDUM

jQueryを使ってドラッグ&ドロップでオブジェクトの並び順を操作する

CMS操作時、登録したオブジェクトを並び替える際に順序を打ち込むのでも良いのですがドラッグ&ドロップで感覚的に操作して入れ替える方法をメモ。

HTML

<form action="○○○○.php" method="post">
 <table class="listTable">
  <thead>
   <tr>
    <th>NO</th>
    <th>カテゴリー名</th>
   <th>並び順</th>
  </tr>
  </thead>
  <tbody id="sortdata">
   <tr name="1">
    <td>1</td>
    <td>タロット占い</td>
    <td name="num_data"><input type="hidden" name="data[]" value="1"><input type="text" name="item_order[]" value="1"></td>
   </tr>
   <tr name="1">
    <td>2</td>
    <td>ヒーリング</td>
    <td name="num_data"><input type="hidden" name="data[]" value="2"><input type="text" name="item_order[]" value="2"></td>
   </tr>
   <tr name="1">
    <td>3</td>
    <td>西洋占星術</td>
    <td name="num_data"><input type="hidden" name="data[]" value="3"><input type="text" name="item_order[]" value="3"></td>
   </tr>
  </tbody>
 </table>
 <ul class="submitbtn">
  <li><input type="submit" name="changeno" value="表示順を更新する"></li>
 </ul>
</form>
<!-- ページ送り機能 -->
<nav>
 <ul class="paging">
  <li><a href="">最初のページ</a></li>
  <li><a href="?pageno=1">1</a></li>
  <li><a href="?pageno=2">2</a></li>
  <li><a href="?pageno=3">3</a></li>
  <li><a href="?pageno=3">最後の(3)ページ</a></li></ul>
</nav>
<!-- ページ送り機能 -->

trタグの「name」の値にはオブジェクトの開始番号を入力。
上記例は最大表示数3までで、1ページ目のため1。
2ページ目の場合は「3*(2-1)+1=4」、3ページ目の場合は「3*(3-1)+1=7」となります。

jQuery

$('#sortdata').sortable();
var defno = $('#sortdata').find('tr').attr('name');
$('#sortdata').bind('sortstop',function(){
	$(this).find('[name="num_data"]').each(function(idx){
		$(this).find('input[type="text"]').val(Number(defno)+idx);
	});
});

jQuery UI の Sortableメソッドを利用し、ドロップ時に取得したオブジェクトのの開始番号から加算して自動的に番号を割り振り、入力項目に値を挿入。

PHP

if(!empty($_POST['changeno'])){
	$count = count($_POST['data']);
	for($i = 0; $i < $count; $i++){
		//データベースへの登録処理
		$updatesql = $db->pdo->prepare('UPDATE ○○○○ SET ○○○○ = :item_order WHERE ○○○○ = :id');
		$updatesql->bindValue(':item_order', $_POST['item_order'][$i], PDO::PARAM_INT);
		$updatesql->bindValue(':id', $_POST['data'][$i], PDO::PARAM_INT);
		$updatesql->execute();
	}
}

サブミットボタンの押下時にフォームの値を取得してデータベースの値を更新しています。

仕様上、ページを渡ってオブジェクトの入れ替えができないので、その際は数値を直接入力してから再度並びを調整します。

同一カテゴリーの記事