Question

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

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

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

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

我已经在http://codepen.io/jasondavis/pen/ztirw?editors=101

设置了一个可以在CodePen.io上使用的演示

我可以使用一些帮助来更新每个Div下提交的表单，以便每次发生Drop时使用Sort顺序更新字段。因此，我不想以正确的排序顺序保存一串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开头的输入字段并相应地设置索引。

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

1 个答案: