JQuery sortable как отправить по-новому отсортированный список на удаленный сервер

Question

Предположим, есть простенькая реализация перетаскиваемого списка:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/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?

Answer 1

<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);
    }
});

БЛОГ НА HUSL

JQuery sortable как отправить по-новому отсортированный список на удаленный сервер

Ответы (1 шт):