主页 / 问题 / 1259796
Accepted
Elizaveta
Asked:2022-03-23 23:04:14 +0000 UTC2022-03-23 23:04:14 +0000 UTC

jquery sortable如何将新排序的列表发送到远程服务器

  • 772

假设有一个可拖动列表的简单实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <title>Title</title>
</head>
<body>
<ul class="list-group">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
    <li class="list-group-item">A third item</li>
    <li class="list-group-item">A fourth item</li>
    <li class="list-group-item">And a fifth one</li>
</ul>
<script>
    $(".list-group").sortable();
</script>
</body>
</html>

服务器上有一个数据库（sql）：

create table items(
int id auto_increment primary key,
item varchar (100) not null,
position int default id
)

我可以使用 ajax 从服务器接收此列表作为数组，按位置排序，然后将其推送到页面上。但是如果我拖放一些元素并想保持顺序怎么办？如何将此列表发送回服务器，仅已更新？

也许有一些函数可以将列表的全部内容转换为 json？

javascript

1 个回答

  1. Best Answer
    <ul class="list-group">
    <li class="list-group-item" data-item="1">An item</li>
    <li class="list-group-item" data-item="2">A second item</li>
    <li class="list-group-item" data-item="3">A third item</li>
    <li class="list-group-item" data-item="4">A fourth item</li>
    <li class="list-group-item" data-item="5">And a fifth one</li>
</ul>

    和

    $(".list-group").sortable({
    stop:(event, ui) => {
        let newGroup = [...event.target.querySelectorAll(".list-group-item")].map((el, index) => {
            return {position: index, item: el.getAttribute("data-item")};
        });
        
        console.log(newGroup);
    }
});
    • 0

相关问题