javascript - 如何在表单中拖放 HTML 列表项并更改其隐藏输入字段值

Question

我一直在寻找一个全面的“易于理解”的解决方案来解决这个问题，但没有找到任何东西。我对 JavaScript 的了解有限，所以请多多指教! :)

<form name="xyz" action="/scripts/change-position.php">
    <ul>
        <li draggable="true">Item A <input type="hidden" name="position" value="1"></li>
        <li draggable="true">Item B <input type="hidden" name="position" value="2"></li>
        <li draggable="true">Item C <input type="hidden" name="position" value="3"></li> 
    </ul>
    <input type="submit" value="Save new order">
</form>

1. 如何使我的列表项可排序？
2. 如何更新每个 li 隐藏输入字段的值以反射(reflect)新顺序？
3. 我已经在需要插入表单的页面上使用了 jQuery，因此 jQuery 的纯 JavaScript 会更好。
4. 不是必须的，但该解决方案最好适用于移动设备。

预先感谢您的帮助!

Answer 1

不客气，jQueryUI 可排序。我使用更新事件来更改隐藏输入的位置值。当用户停止排序并且 DOM 位置发生变化时，会触发更新事件。

更新

添加了jqueryui-touch-punch以支持触摸事件

$(document).ready(function(){
  var list = $('#mySortable'),
      updatePosition = function() {
        list.children().each(function(i, e){
          $(this).children('input[type="hidden"]').val(++i);
        });
      };

  list.sortable({
    placeholder: "ui-state-highlight",
    update: updatePosition
  });
});

ul{
  list-style-type: none;
  padding-left: 0;
}
li,
.ui-state-highlight {
  font-size: 16px;
  line-height: 18px;
  border: 1px solid #999;
  padding: 0.5em 1em;
  margin-bottom: 0.25em;
	box-sizing: border-box;
	height: 2.5em;
	max-width: 100%;
  background-color: #fff;
}

.ui-state-highlight{
	display: block;
  background-color: #999;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/jquery.ui.touch-punch.min.js"></script>


<form name="xyz" action="/scripts/change-position.php">
    <ul id="mySortable">
        <li draggable="true">Item A <input type="hidden" name="position" value="1"></li>
        <li draggable="true">Item B <input type="hidden" name="position" value="2"></li>
        <li draggable="true">Item C <input type="hidden" name="position" value="3"></li> 
    </ul>
    <input type="submit" value="Save new order">
</form>