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是提供的示例小提琴的混搭，也是保存表格行宽度的修复。

<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/

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

0 个答案: