如何捕获使用 jQuery sortable 排序的元素？答案

【问题标题】：How to capture elements sorted using jQuery sortable?如何捕获使用 jQuery sortable 排序的元素？
【发布时间】：2015-08-14 23:26:05
【问题描述】：

我正在使用 jQuery UI 可排序并尝试将表格行拖放为可排序项目。到目前为止，我已经得到了要拖放的行以及保留行宽度的修复程序。但是，我不确定如何实际捕获已排序行的结果。

我正在使用一个示例here，它显示了我正在寻找的内容。我的问题（我认为）是我如何将引用的示例从列表元素改编为表格行。我不确定我哪里出错了。

这是我正在尝试排序的 HTML 表格。

<pre> 
    <div id="info">Waiting for update</div> 
</pre>

<table class="u-full-width alternate" id="sort">
    <thead>
        <tr>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td id="listItem_116"><img src="/images/arrows.png" class="handle" /> Restaurants</td>
        </tr>
        <tr>
            <td id="listItem_117"><img src="/images/arrows.png" class="handle" /> Automotive</td>
        </tr>
        <tr>
            <td id="listItem_117"><img src="/images/arrows.png" class="handle" /> Retail</td>
        </tr>
    </tbody>
</table>

我的 javascript 是提供的示例小提琴的混搭，也是保留表格行宽度的修复程序。

<script> 
    $(document).ready(function() {
        // Return a helper with preserved width of cells
        var fixHelper = function(e, ui) {
            ui.children().each(function() {
                $(this).width($(this).width());
            });
            return ui;
        };

        $("#sort tbody").sortable({
            helper: fixHelper
        }).disableSelection();

        $("#sort tbody").sortable({
            handle : '.handle',
            update : function () { 
                var order = $('#sort').sortable('serialize');
                $('#info').load("process-sortable.php?"+order); 
            } 
        }); 
    }); 
</script>

最后我得到了处理结果的 PHP 文件。此时它只是打印结果，但这足以让我继续前进。这是我应该看到可排序结果的地方，但不是。

<?php 
/**
 * This is where you would inject your sql into the database 
 * but we're just going to format it and send it back 
 */ 

foreach ($_GET['listItem'] as $position => $item)
{
    $sql[] = "UPDATE `table` SET `position` = $position WHERE `id` = $item"; 
}
print_r ($sql); 
?>

我已将相同的 HTML 和 javascript 放入小提琴中，以防它可能有助于诊断 javascript 问题。 http://jsfiddle.net/wypzz854/1/

【问题讨论】：

那么你在哪里将信息发送到 php？你能告诉我们你的表格吗？
@MrJack 没有表格。而load()是一个ajax方法
我应该包含我使用的原始教程，其中包含一个表单，尽管我不完全确定它的目的是什么，因为删除它不会影响功能。 linssen.me/entry/extending-the-jquery-sortable-with-ajax-mysql
在那个例子中，他们使用相同的 id 来进行 order 和 sortable，你没有，所以你需要用一个表单来做。
@MrJack 不需要表格。许多 ajax 是用不涉及形式的数据完成的

标签： javascript jquery jquery-ui

【解决方案1】：

你有几个问题。

id 应该在 <tr> 的可排序元素上。

变化：

<tr>
    <td id="listItem_116"></td>
</tr>

到：

<tr id="listItem_116">
    <td></td>
</tr>

您的排序选择器是 $("#sort tbody")，但在更新事件中，您尝试使用 $("#sort") 序列化父表

试试这个：

$("#sort tbody").sortable({
    handle : '.handle',
    update : function (e, ui) { 
        // we want to serialize "this"
        var order = $(this).sortable('serialize');            
        $('#info').load("process-sortable.php?"+order); 
    } 
});

DEMO

【讨论】：