javascript - jQuery 拖放表行排序不起作用

Question

我想制作一个脚本，通过拖放操作从数据库中排序一些行。行显示在表格中，我拖放行以重新排序。每个 tr 都有来自数据库的行 ID。当我拖放一行时，jquery 序列化表格内容并将其发送到 php 以保存行位置。

数据库中没有保存行位置可能是什么问题？

带行的表格:

$select_categories = mysqli_query($db_connect, "SELECT `id`, `title` FROM `categories` ORDER BY `category_order` ASC") or die(mysqli_error());

if(mysqli_num_rows($select_categories) != 0)
{
    echo '<table cellpadding="0" cellspacing="0" class="manage_content" id="sort_rows" align="center">';

    while($category = mysqli_fetch_assoc($select_categories))
    {
        echo '
        <tr id="row-'.$category['id'].'">
            <td width="700"><a href="'.$website_address.'/admin/categories_edit.php?id='.$category['id'].'">'.$category['title'].'</a></td>
            <td><a href="'.$website_address.$_SERVER['PHP_SELF'].'?action=delete_content&amp;id='.$category['id'].'" class="delete_content">Delete</a></td>
        </tr>
        ';
    }

    echo '</table>';
}

jQuery

$("#sort_rows tbody").sortable({

    cursor: 'move',
    delay: 180,

    update: function()
    {
        var rowsOrder = $(this).sortable("serialize");

        $.post("ajax_actions.php", { action:'change_rows_order', table:'categories', order:'category_order', rows_order:rowsOrder } );
    }

}).disableSelection();

AJAX

if(isset($_POST['action']) && $_POST['action'] == 'change_rows_order')
{
    $order_no = 1;

    foreach($_POST['rows_order'] as $row_id)
    {
        $update_order = mysqli_query($db_connect, "UPDATE `".clear_tags($_POST['table'])."` SET `".clear_tags($_POST['order'])."` = '".$order_no."' WHERE `id` = '".$row_id."'") or die(mysqli_error());

        $order_no++;
    }
}

HTML

<table cellpadding="0" cellspacing="0" class="manage_content" id="sort_rows" align="center">
<tr id="row-10">
    <td width="700"><a href="http://local.admin.com/admin/categories_edit.php?id=10">Editorial</a></td>
    <td><a href="http://local.admin.com/admin/index.php?action=delete_content&amp;id=10" class="delete_content">Delete</a></td>
</tr>

<tr id="row-11">
    <td width="700"><a href="http://local.admin.com/admin/categories_edit.php?id=11">Fashion</a></td>
    <td><a href="http://local.admin.com/admin/index.php?action=delete_content&amp;id=11" class="delete_content">Delete</a></td>
</tr>

<tr id="row-12">
    <td width="700"><a href="http://local.admin.com/admin/categories_edit.php?id=12">Street Style</a></td>
    <td><a href="http://local.admin.com/admin/index.php?action=delete_content&amp;id=12" class="delete_content">Delete</a></td>
</tr>

<tr id="row-13">
    <td width="700"><a href="http://local.admin.com/admin/categories_edit.php?id=13">Portraits</a></td>
    <td><a href="http://local.admin.com/admin/index.php?action=delete_content&amp;id=13" class="delete_content">Delete</a></td>
</tr>

<tr id="row-14">
    <td width="700"><a href="http://local.admin.com/admin/categories_edit.php?id=14">Clothing</a></td>
    <td><a href="http://local.admin.com/admin/index.php?action=delete_content&amp;id=14" class="delete_content">Delete</a></td>
</tr>
</table>

Answer 1

我解决了这个问题。我按照这里的教程进行操作:http://www.webresourcesdepot.com/dynamic-dragn-drop-with-jquery-and-php/