jquery sortable 获取更改的dom项目并发送ajax调用答案

【问题标题】：jquery sortable getting changed dom items and sending ajax calljquery sortable 获取更改的dom项目并发送ajax调用
【发布时间】：2015-03-15 13:56:03
【问题描述】：

我有一个跨多个列的可排序 div 列表，jsfiddle link 有演示。我可以很好地进行 ajax 调用，我添加了更新事件来捕获更改。

   update: function(event, ui) {
           // $.post('/reorder', $(selector).sortable('serialize'))
            //    .done(function() {
            //        alert('Updated')
          //    });
          //console.log($("#ready").sortable("serialize", { key: "sort" }));
        }

我只是不知道如何从每个更改了特定列的 DOM 位置的 div 容器中获取 id。我已将数据库更新所需的 ID 号写入 todo-task id 属性。 ajax 调用需要针对每个 ID 号。

 <div class="task-list task-container ui-droppable ui-sortable ui-state-highlight" id="ready">
    <h3 class="ui-sortable-handle">Ready</h3>        
<div style="position: relative;" id="5329" class="todo-task ui-draggable-handle ui-sortable-handle"><div class="task-header"><div class="task-no">5329</div><div class="task-type">WBS</div></div><div class="task-body"><div class="task-title">New task</div></div><div class="task-footer"><div class="task-date">Due: 20/03/2015</div></div></div><div style="width: 277px; right: auto; height: 85px; bottom: auto; opacity: 1;" id="5327" class="todo-task ui-draggable-handle ui-sortable-handle"><div class="task-header"><div class="task-no">5327</div><div class="task-type">WBS</div></div><div class="task-body"><div class="task-title">Hand over to operations</div></div><div class="task-footer"><div class="task-date">Due: 01/10/2015</div></div></div><div style="position: relative;" id="839" class="todo-task ui-draggable-handle ui-sortable-handle"><div class="task-header"><div class="task-no">839</div><div class="task-type">Issue</div></div><div class="task-body"><div class="task-title">Demo Issue</div></div><div class="task-footer"><div class="task-date">Due: 28/01/2014</div></div></div><div style="position: relative;" id="841" class="todo-task ui-draggable-handle ui-sortable-handle"><div class="task-header"><div class="task-no">841</div><div class="task-type">Issue</div></div><div class="task-body"><div class="task-title">New Issue 1</div></div><div class="task-footer"><div class="task-date">Due: 22/08/2014</div></div></div></div>

我见过其他尝试使用序列化的方法，但这似乎没有给我任何结果。

任何帮助表示赞赏..

【问题讨论】：

标签： jquery jquery-ui-sortable

【解决方案1】：

你可以像这样访问.update()中的ui.item

ui.item.attr('id')

更新竟然是这样的

更新（事件，用户界面）

Sortable 的更新事件有 event 和 ui。您可以使用 ui 可以访问正在排序的当前元素。由于您已经将 id 存储在 dom 元素中，因此您可以通过上述方式访问它。

这是demo

希望对你有帮助

【讨论】：

访问被删除的 div 没问题，我如何获取所有已更改位置的元素的 id？
为此，您必须从一开始就在变量中维护所有 div 的结构。移动元素后，您必须更新该变量，然后执行 ajax

【解决方案2】：

这是我在更新事件中使用的代码，它返回给定放置区域中的所有项目，然后将 id 添加到数组中，然后删除任何空白数组元素，然后在 ajax 调用中发送列表后端处理。

      update: function(event, ui) {
          var dropElement = $(this).closest('.ui-droppable').attr('id');

          var arr;
          $("#"+dropElement).each(function () {
              arr = $(this).sortable("toArray");
          });
          arr = $.grep(arr, function (n) {
              return (n);
          });
          console.log(arr);

          $.ajax({
              type: "POST", url: "/Processing/Projects/Methods/postSprintOrder/", data: { profileid: profileid, order: arr.toString() , actiontype: 'update' }, dataType: "html",
              success: function (response) {
              },
              error: function (response) {
                  alert(response);

              }
          });

      }

【讨论】：