jQuery UIで画像を並び替え，その順番をファイル出力

jQuery UIを使って複数枚の画像をドラッグ&ドロップで並び替え，その順番をファイル出力できるようにした時の記録です．例として，3枚の画像の並び替えを行うコードを書きます．

jQuery UIインストール
html側
JavaScript側
挿入位置を可視化したい場合

jQuery UIインストール

導入は簡単で二行書くだけ．"path to jquery"には保存先を入れてください．

<script src="path to jquery/jquery-3.2.1.js"></script>
<script src="path to jqueryjquery/jquery-ui.js"></script>

ダウンロードの手順などは，こちらにもう少し詳しく書いています．

html側

<body >
<div id="item_images">
    <div id="1"><img src="画像名1" width="300" alt=""></div>
    <div id="2"><img src="画像名2" width="300" alt=""></div>
    <div id="3"><img src="画像名3" width="300" alt=""></div>
</div>
<p>取得した並び順 : <span id="sorted"></span></p>

<br>

<div id = "myForm">
    <a id="download-link" href="#">Click here to download score data.</a>
</div>
</body>

JavaScript側

<script>
    $(function()
    {
        $('#item_images').sortable
        ({
            opacity: 0.5,
            update: function(event,ui)
            {
                // convert sorted order to text
                $('#sorted').text($('#item_images').sortable("toArray"));
            }
        });
    });

  // for score data download 
  var $id = function(id) { return document.getElementById(id); }
  window.onload = function()
  {
    $id("download-link").addEventListener("click", function()
    {
      var href = "data:application/octet-stream,";
            for(var i=0; i<3; i++)
            {
                var value = $('#item_images').sortable("toArray")[i];
                href = href + encodeURIComponent(value) + ",";
            }
      this.setAttribute("href", href);
    }, false);
  }
    
</script>

挿入位置を可視化したい場合

例として黒の波線を挿入位置に表示するコードを載せておきます．以下の関数内にplaceholder: "mark"を追加．

<script>
    $(function()
    {
        $('#item_images').sortable
        ({
            opacity: 0.5,
            placeholder: "mark",
            update: function(event,ui)
            {
                // convert sorted order to text
                $('#sorted').text($('#item_images').sortable("toArray"));
            }
        });
    });
</script>

そして，html側でスタイルを定義

<style>
.mark{
    border: dotted 2px black;
}
</style>

意外と簡単にできてよかった...！