draggable="true"で項目を入れ替えた後、その情報を保存する方法

前提・実現したいこと

HTML, CSS, JavaScript, PHPで表を作るアプリケーションを作成中です。
この表では、チェックボックスで選択した内容を別のページの表に○と表示するようにしたいです。
現在はこの表をブラウザ側で編集して、自分なりのチェックボックスを作れるようになることを目指しています。

発生している問題・エラーメッセージ

項目の入れ替えはHTMLのdraggable="true"で出来そうだと思ったのですが、
それを保存する方法が分からず、止まってしまいました。
PHPならブラウザの表示を書き換えることが出来そうだと思ったのですが、
書き換えた後保存する方法をインターネット、書籍で探してみても見つけられず、
先が見えない状態です。

具体的には、以下の「draggable属性の参考サイト」のサンプルプログラムで
順序を変更した後その変更情報を保存して、
次に開くときには、順序を変更した後の状態で表示できれば、
表の項目の入れ替え情報を保存することできるのではないかと考えています。

そもそも実現ができるかできないかも含めて、回答をお願いしたいです。
よろしくお願いします。

該当のソースコード

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
  <script type="text/javascript">
    var dragSrcEl = null;

    function handleDragStart(e) {
      dragSrcEl = this;
      e.dataTransfer.effectAllowed = 'move';
      e.dataTransfer.setData('text/html', this.outerHTML);
      this.classList.add('dragElem');
    }

    function handleDragOver(e) {
      if (e.preventDefault) {
        e.preventDefault();
      }
      this.classList.add('over');
      e.dataTransfer.dropEffect = 'move';
      return false;
    }

    function handleDragEnter(e) {
    }

    function handleDragLeave(e) {
      this.classList.remove('over');
    }

    function handleDrop(e) {
      if (e.stopPropagation) {
        e.stopPropagation();
      }

      if (dragSrcEl != this) {
        this.parentNode.removeChild(dragSrcEl);
        var dropHTML = e.dataTransfer.getData('text/html');
        this.insertAdjacentHTML('beforebegin', dropHTML);
        var dropElem = this.previousSibling;
        addDnDHandlers(dropElem);
      }
      this.classList.remove('over');
      return false;
    }

    function handleDragEnd(e) {
      this.classList.remove('over');
    }

    function addDnDHandlers(elem) {
      elem.addEventListener('dragstart', handleDragStart, false);
      elem.addEventListener('dragenter', handleDragEnter, false);
      elem.addEventListener('dragover', handleDragOver, false);
      elem.addEventListener('drop', handleDrop, false);
      elem.addEventListener('dragend', handleDragEnd, false);
    }

    function PageLoad() {
      var cols = document.querySelectorAll('#columns .column');
      [].forEach.call(cols, addDnDHandlers);
    }
  </script>
</head>
<body onload="PageLoad();">
  <ul id="columns">
    <li class="column" draggable="true"><header>ぺんぎんクッキー</header></li>
    <li class="column" draggable="true"><header>あひるサプレ</header></li>
    <li class="column" draggable="true"><header>しろくまアイス</header></li>
    <li class="column" draggable="true"><header>にわとりタルト</header></li>
    <li class="column" draggable="true"><header>かるがもクラッカー</header></li>
  </ul>
</body>
</html>

補足情報

・draggable属性の参考サイト
https://www.ipentec.com/document/javascript-list-sortable-item
ここにより詳細な情報を記載してください。

行動規範の内容に同意します

回答1件

ベストアンサー

まずdraggableな要素はベタ書きではなく可変データ（DBやファイルなどのデータ）から動的に生成するようにする必要があります。
その上で、PHP側にそのデータを更新するためのAPIを用意し、画面側では要素を入れ替えた時にそのAPIを呼び出して元データを更新するようにすることで実現できます。

投稿2021/10/23 17:07

175

総合スコア147

退会済みユーザー

2021/10/23 17:29

回答ありがとうございます。難しそうですね。質問が２点ございます。「銅的に生成」とありますが、項目に関するDBやファイルを作って、それをJSで属性を付加するということでしょうか？「APIを用意し」とありますが、恥ずかしながらAPIを作ることを今まで考えたことがないので、基礎的なところから勉強したいです。「Web API」と書かれているような書籍を当たれば良いのでしょうか？よろしくお願いします。

175

2021/10/23 18:07

「動的に生成」はPHPでもJSでも構いません。 PHPでやるパターン：PHPでDBのデータを取得し、そのデータを元にHTMLにdraggableな要素を挿入する JSでやるパターン：DBから現状の表示順でデータを返すAPIをPHPで実装し、画面側はJSでそのAPIから取得したデータを元にdraggableな要素を生成する APIについては「PHP Web API」などでググればいくらでもヒットするので適当なページを参考にしてください。

退会済みユーザー

2021/10/23 18:40

わかりました。ありがとうございました。調べて少し考えてみます。

行動規範の内容に同意します