使用自动保存

Question

我对javascripting和php相当新。我需要创建一组单独的列表，并且可以在列表之间拖放项目。每个列表中的顺序并不重要（应该可以使用SORT BY进行调整）。

在其他一些用户的帮助下，我有拖放项目的功能，但我还需要将它自动保存到数据库中，我不知道从哪里开始。

任何人都可以帮助我朝正确的方向发展吗？

EDIT！重写代码到PDO。并且要明确：自动保存意味着完成拖放后，我需要脚本自动将新位置保存到数据库（即，从列表1移动到列表2的li必须更新到位置2 in拖动完成后的数据库。）

//PHP to connect and echo out the three lists
<?php
$db = new PDO('mysql:host=server;dbname=db;charset=utf8mb4', 'user', 'password');
$db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$db->setAttribute(PDO::ATTR_EMULATE_PREPARES, false);

// List 1
echo '<ul id="items1" class="items">';
foreach($db->query('SELECT * FROM dragcolumn WHERE position = 1') as $row) {
echo '<li class="list" id="recordsArray_'.$row['id'].'">'.$row['name'].'</li>';
}
echo '</ul>';

// List 2
echo '<ul id="items2" class="items">';
foreach($db->query('SELECT * FROM dragcolumn WHERE position = 2') as $row) {
echo '<li class="list o" id="recordsArray_'.$row['id'].'">'.$row['name'].'</li>';
}
echo '</ul>';

//List 3
echo '<ul id="items3" class="items">';
foreach($db->query('SELECT * FROM dragcolumn WHERE position = 3') as $row) {
echo '<li class="list g" id="recordsArray_'.$row['id'].'">'.$row['name'].'</li>';
}
echo '</ul>';
?>

//Javascript to move the <li> items
$(function () {
        $("#items1,#items2,#items3,#items4").sortable({
                connectWith: "#items1,#items2,#items3,#items4",
                start: function (event, ui) {
                    ui.item.toggleClass("highlight");
            },
            stop: function (event, ui) {
                    ui.item.toggleClass("highlight");
            }
    });
    $("#items1,#items2,#items3,#items4").disableSelection();
});

Answer 1

我会以两种方式做到这一点： 1.在页面加载时，我将保存每个ul列表的起始位置（li元素），拖放后我将检查每个元素的当前位置，并根据这些更改将使用ajax进行数据库操作（删除/添加） 。 2.使用ajax成功拖放（当元素被删除时）进行数据库操作。 这只是一个想法，如何制作，看看事件和ajax，如果你仍然在努力，我会很乐意帮助你。