JQuery UI Sortable组件未触发事件问题求助

大家好，我现在卡在一个问题上：我的jQuery UI Sortable组件完全没触发，不管是start、update还是stop事件，控制台都看不到我写的日志输出。

我的需求是实现拖拽排序功能，记录每个项目所在的表格，把排序结果保存到MySQL数据库里，这样用户下次加载页面时，项目还能保持在对应的表格和排序位置。

我已经折腾好一阵了：试过更换不同的类名和ID、核对了jQuery选择器的匹配、也确认了jQuery和jQuery UI的加载顺序没问题，但就是找不到问题出在哪。下面是我的全部代码，麻烦各位帮忙看看：

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Drag and Drop System</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
    <script src="script.js"></script>

    <div class="container">
        <div class="table" id="table1">
            <h2>Table 1</h2>
            <div class="draggable" id="item1">Item 1</div>
            <div class="draggable" id="item2">Item 2</div>
        </div>
        <div class="table" id="table2">
            <h2>Table 2</h2>
        </div>
    </div>
</body>
</html>

CSS代码 #

.container {
    display: flex;
    justify-content: space-around;
}

.table {
    width: 200px;
    border: 1px solid black;
    padding: 10px;
    margin: 10px;
}

.draggable {
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    padding: 10px;
    margin-bottom: 5px;
    cursor: move;
}

JavaScript代码 #

$(document).ready(function() {

    $(".draggable").draggable({
        revert: "invalid",
        helper: "clone"
    });

    $(".table").droppable({
        accept: ".draggable",
        drop: function(event, ui) {
            var draggable = ui.draggable.clone();
            $(this).append(draggable);
            draggable.draggable({
                revert: "invalid",
                helper: "clone"
            });
            ui.draggable.remove();

            //var targetTableId = $(this).attr('id');
            //alert("Item dropped into Table: " + targetTableId);
        }
    });

    $(".table").sortable({
        items: ".draggable",
        connectWith: ".table",
        start: function(event, ui) {
            console.log("Sortable initialized for table:", $(this).attr('id'));
        },
        update: function(event, ui) {
            console.log("UPDATE CALLED");
            var tableId = $(this).attr('id');
            var order = $(this).sortable('toArray').toString();
            saveChanges(tableId, order);
        },
        stop: function(event, ui) {
            var tableId = $(this).attr('id');
            console.log("Table ID:", tableId);
        }
    });

    function saveChanges(tableId, order) {
        $.ajax({
            url: "save_changes.php",
            method: "POST",
            data: {
                table_id: tableId,
                order: order
            },
            success: function(response) {
                console.log(response);
            }
        });
    }

});

PHP保存代码（save_changes.php） #

<?php
// Connection to your database
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "your_database";

$conn = new mysqli($servername, $username, $password, $dbname);

// Check connection
if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

$table_id = $_POST['table_id'];
$order = $_POST['order'];

// Update the database with the new order
$sql = "UPDATE your_table SET order_column = '$order' WHERE table_id = '$table_id'";

if ($conn->query($sql) === TRUE) {
    echo "Changes saved successfully!";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();
?>

备注：内容来源于stack exchange，提问作者user23448609