jQuery UI で要素を並び替える①

2019年1月12日おやじコメントする

jQuery UIについて

下記、Wikipedia より抜粋させて頂きます。

jQuery（ジェイクエリー）は、ウェブブラウザ用のJavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリである。　jQuery UI はインタラクティブなWebサイトを開発するために使用される、jQueryをベースにしたJavaScriptのライブラリである。
（フリー百科事典『ウィキペディア（Wikipedia）』より）

少し前にJavaScriptとPHPを混在するプログラムを作ろうとしたことがありますが、うまく出来ず、混在出来ないと勝手に解釈していました。また、実際にHTML，PHP，JavaScript，更にはjQueryなど、同時に勉強していると頭が混乱してしまいます。
この様な理由から JavaScript、更にはJQueryの利用はあまり好きではありませんが、少し調べてみて、今回の要素の並び替えを行うには、jQuery UIの“Sortable”というライブラリを使用するのが効果的と感じたので試してみることにします。

準備

各ライブラリにリンクして読み込むことで利用できますが、ダウンロードして使うことも出来ます。
下記はリンクして使う場合の記載例です。１行目がjQuery、２行目がjQuery UI 、３行目は後日スマホ上でも機能する様に追加した‘jquery.ui.touch-punch’ です。jQuery UI はjQueryをベースにしていますので、この順番で記載する必要があります。

ダウンロードする場合は、各サイトよりダウンロードします。今回ダウンロードしたライブラリファイルのメインページとバージョンについて記載します。

名称	メインページ	バージョン
jQuery	https://jquery.com/	jquery-3.3.1.min.js
jQuery UI	https://jqueryui.com/	jquery-ui-1.12.1
touch-punch	http://touchpunch.furf.com/	ー

マウスでは動きますが、後日アンドロイドスマホ，Windowsタブレットタッチ操作では動かないことを確認しました。
⇒ アンドロイドスマホは、‘jquery.ui.touch-punch.min.js’ を追加することで動作を確認できました。

基本プログラム

jQuery UIの“Sortable”デモプログラムが、ダウンロードサイトに幾つか紹介されています。先ず下記の比較的シンプルなものを確認しました。
Drop placeholder (https://jqueryui.com/sortable/#placeholder)

確認後、自分なりに少しアレンジしたものが下記です。
jQuery UI‐Sortable 基本プログラム（デモにリンク）
項目１～７のリスト項目があり、それぞれをドラッグアンドドロップで順番を並び替えることができます。
並び替え自体は、ライブラリを使用し、比較的簡単に出来ました。ただ、CSSでの表示設定がなかなかうまくいかず、自分にとっての課題として改めて認識しました。
以下、プログラムについて概略を記録しておきます。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable</title>

  <style>
    body {line-height: 100%;}
    #sortable { list-style-type: none; margin: 0; padding:0; width: 500px; }
    #sortable li { margin:5px; padding: 20px 0px 20px 0px; font-size:30px; border:solid 1px #000000; width: 240px;
		text-align:center;  }

    .ui-state-highlight { background-color: #ffff00; height:16px; }

  </style>

  <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="./js/jquery-ui-1.12.1/jquery-ui.min.js"></script>
  <script>
    $( function() {
      $( "#sortable" ).sortable({
	revert: true,
      	cursor: 'move',
        opacity: 0.8,
        placeholder: 'ui-state-highlight'
      });

      $( "#sortable" ).disableSelection();
      } );
  </script>
</head>

<body>

<h3>jQuery UI Sortable テスト</h3>
<p1>自由に順番を入れ替えて下さい。</p1>
<ul id="sortable">
  <li class="ui-state-default">項目１</li>
  <li class="ui-state-default">項目２</li>
  <li class="ui-state-default">項目３</li>
  <li class="ui-state-default">項目４</li>
  <li class="ui-state-default">項目５</li>
  <li class="ui-state-default">項目６</li>
  <li class="ui-state-default">項目７</li>
</ul>

</body>
</html>

基本的には、行番18，19でライブラリ読み込み後、行番38でリストに設定したID（=”sortable”）に対し、行番21～31で jQueryメソッドを設定すれば、リストの中の項目１～７の並べ替えが可能となります。行番23～26はオプション設定しているもので、必ずしも必要なものではありません。設定内容を下表に示します。

行番	項目	内　　容
23	revert	ドラッグ移動後に新しい位置までアニメーション移動を設定
24	cursor	ドラッグ時のカーソルの表示を指定
25	opacity	ドラッグ移動時の要素の透明度を指定
26	placeholder	ドラッグ時に空白領域に入る要素(placeholder)のclass名を設定

※公式ドキュメント

行番8～16では、リスト項目の外観を設定しています。時間的にはここが一番苦労しました。リスト項目の大きさを設定し、表示する文字を縦横中央に配置する。移動時の移動先場所色を変えて判りやすくする様にしたかったのですが、微妙に設定項目が相互に影響を与え、結構時間が掛かりました。とりあえず外観上は意図した通りですが、移動時の移動先高さ設定は“height”の値等を調整した結果であり、考え方は理解できていません。

テーブル要素の並べ替え

次はテーブル要素の並べ替えについて確認してみます。次の図の様にテーブルの中の１行をドラッグアンドドロップし、表の中の順番を変更することが出来る様になります。また、並び替えが終了した時に上の行から順番をつけなおしています。jQuery UI‐Sortable テーブル要素並び替え（デモにリンク）

プログラム概要を記録しておきます。行番52～82でテーブルを定義しています。ここでは、<table>～</table>の子要素として、 <thead>～</thead>と <tbody>～</tbody>を使用しています。行番60（ <tbody id=“sortable”> ）で IDを設定し、このIDに対して、行番25～32で jQueryメソッドを設定することで並び替えを可能にしています。表の最上段を<thead>～</thead>で囲み、並び替えの対象外としています。行番34～40は並び替え完了時、順番を上の行から改めて採番し、表示します。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable</title>

  <style>
    body {line-height: 100%; }
    table { border : solid 1px #000000 ; border-collapse: collapse; }
    th,td { border : solid 1px #000000 ; height : 45px ; text-align:center; }
    th { background-color: #99cc00 }

    .ui-state-highlight { background-color: #ffff00; height:16px; }
    .dsp_no{ width:40px; }
    .itm_nm{ width:90px; }
    .dscrpt{ width:90px; }

  </style>

  <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="./js/jquery-ui-1.12.1/jquery-ui.min.js"></script>
  <script>
    $( function() {
      	$( "#sortable" ).sortable({
		revert: true,
      		cursor: 'move',
        	opacity: 0.8,
        	placeholder: 'ui-state-highlight'
      	});

      	$( "#sortable" ).disableSelection();

      	$('#sortable').on('sortstop', function (e, ui) {
    		// ソートが完了したら実行される。
    		var rows = $('#sortable .dsp_no');
    		for (var i = 0, rowTotal = rows.length; rowTotal > i ; i += 1) {
        		$($('.dsp_no')[i]).text(i + 1);
    		}
      	});

    } );

  </script>
</head>

<body>

<h3>jQuery UI Sortable テスト</h3>
<p1>自由に順番を入れ替えて下さい。</p1>

<table>
    <thead>
        <tr>
            <th>順番</th>
            <th>主食</th>
            <th>のみもの</th>
        </tr>
    </thead>
    <tbody id="sortable">
        <tr>
            <td class="dsp_no">1</td>
            <td class="itm_nm">パン</td>
            <td class="dscrpt">コーヒー</td>
        </tr>
        <tr>
            <td class="dsp_no">2</td>
            <td class="itm_nm">ごはん</td>
            <td class="dscrpt">お茶</td>
        </tr>
        <tr>
            <td class="dsp_no">3</td>
            <td class="itm_nm">ラーメン</td>
            <td class="dscrpt">ビール</td>
        </tr>
        <tr>
            <td class="dsp_no">4</td>
            <td class="itm_nm">パスタ</td>
            <td class="dscrpt">ワイン</td>
        </tr>
    </tbody>
</table>

</body>
</html>

格子状要素の並び替え

次に一番最初に確認した基本プログラムを修正して、格子状要素の並べ替えを行ってみます。下記よりデモプログラムにリンクしています。
jQuery UI‐Sortable 基本プログラム（デモにリンク）
最初の基本プログラムのリストのスタイルを一部修正して、上図の様な外観にすれば、基本的にはドラッグアンドドロップで格子状リストの並べ替えが出来る様になります。
行番11で各リスト項目要素幅を100px，“float: left;” に設定しています。それに対し、行番10で全体幅450pxに設定していますので、実際にはmargin等の設定値も関係しますが、上図の様に4列のリスト項目が横並びになります。各リスト項目要素の高さは、本当はしっかり調べたらよいのですが、height, padding , font-size を適当に調整し、それらしく見える様にしたのが実情です。

<!doctype html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Sortable</title>

  <style>
    body {line-height: 100%;}
    #sortable { list-style-type: none; margin: 0; padding: 0; width: 450px; }
    #sortable li { margin: 5px 3px 5px 0; padding: 35px 0 0 0; float: left; width: 100px; height: 45px; font-size: 20px; text-align: center; border:solid 1px #000000;}

    .ui-state-highlight { background-color: #ffff00; }

  </style>

  <script type="text/javascript" src="./js/jquery-3.3.1.min.js"></script>
  <script type="text/javascript" src="./js/jquery-ui-1.12.1/jquery-ui.min.js"></script>
  <script>
    $( function() {
      $( "#sortable" ).sortable({
	revert: true,
      	cursor: 'move',
        opacity: 0.8,
	placeholder: 'ui-state-highlight'
      });

      $( "#sortable" ).disableSelection();
      } );
  </script>
</head>

<body>

<h3>jQuery UI Sortable テスト</h3>
<p1>自由に順番を入れ替えて下さい。</p1>
<ul id="sortable">
  <li class="ui-state-default">項目１</li>
  <li class="ui-state-default">項目２</li>
  <li class="ui-state-default">項目３</li>
  <li class="ui-state-default">項目４</li>
  <li class="ui-state-default">項目５</li>
  <li class="ui-state-default">項目６</li>
  <li class="ui-state-default">項目７</li>
  <li class="ui-state-default">項目８</li>
  <li class="ui-state-default">項目９</li>
  <li class="ui-state-default">項目１０</li>
  <li class="ui-state-default">項目１１</li>
  <li class="ui-state-default">項目１２</li>
  <li class="ui-state-default">項目１３</li>
  <li class="ui-state-default">項目１４</li>
</ul>

</body>
</html>