要素をjqueryでドラッグアンドドロップをすると同時にphpでsubmitさせたい

Question

実現したいこと

• HTMLのリスト要素をドラッグアンドドロップが完了すると同時にphpでSQLでUPDATE を実行したい

前提

• ひとまずjqueryでのやり方を模索中
• Ajaxの非同期処理で実現可能？

発生している問題

ボタンを押下した際にphpにsubmitすることはできている。

該当のソースコード

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<form action="" method="post">
  <ul class="sortable">
    <li>リスト1</li>
    <li>リスト2</li>
    <li>リスト3</li>
    <li>リスト4</li>
    <li>リスト5</li>
  </ul>
  <input type="hidden" id="result" name="result" />
  <button id="submit">submit</button>
</form>

$(function() {
  $(".sortable").sortable();
  $(".sortable").disableSelection();
  $("#submit").click(function() {
    var result = $(".sortable").sortable("toArray");
    $("#result").val(result);
    $("form").submit();
  });
});

補足情報（FW/ツールのバージョンなど）

jquery でなくても構いません。本当はjQueryを使いたくありません。

Comments

[yambejp]

resultに何も返してないですが、なにをどうpostしようとしていますか？

Answer 1

    <form id="form" action="/path/to/file.php" method="post">
      <ul id="list">
        <li data-id="1">リスト1</li>
        <li data-id="2">リスト2</li>
        <li data-id="3">リスト3</li>
        <li data-id="4">リスト4</li>
        <li data-id="5">リスト5</li>
      </ul>
      <input type="hidden" id="result" name="result" />
    </form>

(function() {
  'use strict';

  $(function() {
    const form = document.getElementById('form');
    const result = document.getElementById('result');
    const $list = $('#list');

    $list.sortable({
      opacity: 0.5,
      axis: 'y',
      update: function() {
        const listOrder = $(this).sortable('toArray', {attribute: 'data-id'}).join(',');
        result.value = listOrder;
        asyncSubmit(form);
      },
    });
    $list.disableSelection();
  })

  function asyncSubmit(form) {
    const options = {
      method: form.method,
      body: new FormData(form),
    };
    fetch(form.action, options);
  }
}());

Comments

[singlestroke]

ありがとうございます。しばし検証のお時間をいただけますでしょうか。