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

Update Div Hidden Field on jQuery Sortable Drag and Drop Update

本文关键字：更新 排序 拖放 字段 Div jQuery 隐藏      更新时间：2023-09-26

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

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

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

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

我在这里设置了一个在CodePen.io上使用的演示http://codepen.io/jasondavis/pen/ztirw?editors=101

我可以使用一些帮助来更新每个Div下的Form，以在每次发生Drop时使用排序顺序更新字段。因此，我不想以正确的排序顺序保存一个ID字符串，而是想将Drop事件中的每个记录更新到具有当前排序位置的Form文件中。

请帮忙吗？

演示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.
        });
    });
});

好的-开始吧：

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开头的所有输入字段，并相应地设置索引。

相关文章：