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

Question

我一直在四处寻找针对此问题的全面 'easy-to-understand' 解决方案，但一直未能找到任何解决方案。我对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>

如何使我的列表项可排序？
如何更新每个 li 的隐藏输入字段的值以反映新订单？
我已经在需要插入表格的页面上使用了 jQuery，因此 jQuery 的纯 JavaScript 会更可取。
不是必须的，但该解决方案最好能在移动设备上运行。

在此先感谢您的帮助！

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>

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

How to drag and drop HTML list items in a form and change their hidden input field values

html

javascript

jquery

draggable

html-lists