javascript - 如何捕获使用 jQuery sortable 排序的元素？

Question

我正在使用 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 是提供的示例 fiddle 的混搭，也是保留表格行宽度的修复。

<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 放入 fiddle 中，以帮助诊断 javascript 问题。 http://jsfiddle.net/wypzz854/1/

Answer 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