Как использовать select2 с drag and drop

Question

Помогите пожалуйста разобраться с такой проблемой. Как подключить к последней версии select2 возможность перетаскивать айтемы, чтобы при этом менялось value селекта. Количество селектов2 на странице у меня динамическое.

Нашел такую тему https://github.com/select2/select2/issues/3004

Использую код предложенный в теме как решение проблемы, но столкнулся с такими проблемами:

Удаление тега проходит не корректно, и не сразу
При добавлении тега порядок возвращается к исходному
Не получается записать эти изменения в value

Собственно сам код:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
    <style>
    .select2 {
        width: 500px;
    }
    </style>
</head>
<body>

    <select class="select2 select2-multiple form-control custom-select" multiple name="alt_city">
        <option value="Винница">Винница</option>
        <option value="Москва">Москва</option>
        <option value="Волгоград">Волгоград</option>
        <option value="Самара">Самара</option>
        <option value="Киев">Киев</option>
    </select>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sortable/0.9.13/jquery-sortable.js"></script>
    <script>

        $(document).ready(function () {
            var selectEl = $('select').select2();
            selectEl.next().children().children().children().sortable({
                containment: 'parent', stop: function (event, ui) {
                    ui.item.parent().children('[title]').each(function () {
                        var title = $(this).attr('title');
                        var original = $( 'option:contains(' + title + ')', selectEl ).first();
                        original.detach();
                        selectEl.append(original)
                    });
                    selectEl.change();
                }
            });
        });

    </script>
</body>
</html>

БЛОГ НА HUSL

Как использовать select2 с drag and drop

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