javascript - 在 jQuery 可排序拖放更新上更新 Div 隐藏字段

Question

我正在使用 HTML5 jQuery 可排序库。不是 jQuery UI Sortable，而是这里的这个 http://farhadi.ir/projects/html5sortable/

我过去在许多项目中使用过它，通常我使用 AJAX 将排序顺序作为 ID 字符串保存到数据库字段中。

在我当前的项目中，我需要做完全不同的事情。这次我没有使用 AJAX 来保存订单。

基本上，我在表单编辑屏幕上运行可排序库，该屏幕将包含一个 DIV 列表，这些 div 内将是表单字段。页面底部有一个保存按钮，提交表单以保存页面上的所有数据。因此，我想将每个 DIV 的排序顺序存储到每个项目的隐藏表单字段中。

我已经在 CodePen.io 上设置了一个演示 http://codepen.io/jasondavis/pen/ztirw?editors=101

我可以使用一些帮助来更新每个 Div 下提交的表单，以便在每次发生 Drop 时使用排序顺序更新字段。因此，我不想以正确的排序顺序保存 ID 字符串，而是希望将 Drop 事件上的每条记录更新到包含当前排序位置的表单中。

请问有什么帮助吗？

演示 HTML 结构如下所示...

<div id="project_tasks" class="tasks_block sortable">

    <div id="task_13" class="task_row">
        <span class="handle"></span>
        <input name="taskid_13" id="taskid_13" size="15" type="text" value="taskID 1">
        <input name="projectid_13" id="projectid_13" size="15" type="text" value="917fdb60-96d7-346f-10b3-54175c9a2f34">
        Sort Order: <input name="sort_order_19" id="sort_order_19" size="15" type="text" value="1">
        <br style="clear:both;">

    </div>

    <div id="task_14" class="task_row">
        <span class="handle"></span>
        <input name="taskid_14" id="taskid_14" size="15" type="text" value="taskID 2">
        <input name="projectid_14" id="projectid_14" size="15" type="text" value="917fdb60-96d7-346f-10b3-54175c9a2f34">
        Sort Order: <input name="sort_order_19" id="sort_order_19" size="15" type="text" value="2">
        <br style="clear:both;">
    </div>

    <div id="task_15" class="task_row">
        <span class="handle"></span>
        <input name="taskid_15" id="taskid_15" size="15" type="text" value="taskID 3">
        <input name="projectid_15" id="projectid_15" size="15" type="text" value="917fdb60-96d7-346f-10b3-54175c9a2f34">
        Sort Order: <input name="sort_order_19" id="sort_order_19" size="15" type="text" value="3">
        <br style="clear:both;">
    </div>


    <div id="task_15" class="task_row taskheading">
        <span class="handle"></span>
        <h2>List Heading 1</h2>
        Sort Order: <input name="sort_order_19" id="sort_order_19" size="15" type="text" value="4">
        <br style="clear:both;">
    </div>  



    <div id="task_16" class="task_row">
        <span class="handle"></span>
        <input name="taskid_16" id="taskid_16" size="15" type="text" value="taskID 4">
        <input name="projectid_16" id="projectid_16" size="15" type="text" value="917fdb60-96d7-346f-10b3-54175c9a2f34">
        Sort Order: <input name="sort_order_19" id="sort_order_19" size="15" type="text" value="5">
        <br style="clear:both;">
    </div>

</div>

一些 JavaScript 来开始......

$( document ).ready(function() {

    $('#project_tasks').sortable({
        handle: '.handle',
        onStartDrag: function() {},
        onEndDrag: function() {},
        onChangeOrder: function() {}
    }).bind('sortupdate', function() {


        $('.sortable div').each(function() {

            // Update a HIDDEN Field under each DIV with the current sort order
            // So when my Form is submitted/saved, it can save the sort order for
            // each record into the database.

        });
    });

});

Answer 1

好的 - 开始吧:

http://codepen.io/anon/pen/IEKvA

 $('.sortable div').each(function(idx) {

          var inputField = $(this).find("[id^='sort_order']");
          $(inputField).val(idx);

  });

这个想法是每次项目被删除时，你都会通过你的 div 运行，找到所有以 id sort_order 开头的输入字段并相应地设置索引。