как реализовать возможность перемещения элементов

Question

    addEventListener("click", function () {
        const labels = [...document.querySelectorAll('[name="emails"]:checked + label')];
        document.getElementById("emails").innerText = labels.map(function(label) {
            return label.innerText
        }).join(', ');
    });

.content {
    background: #84a1e0;
    height: 500px;
    width: 1000px;
    margin: 40px auto;
}
.content > button{
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    top: 50%;
}
.listName1 {
    background: #d6d6d6;
    height: 420px;
    width: 350px;
    margin-top: 80px;

}.listName2 {
     background: #d6d6d6;
     height: 420px;
     width: 350px;
     margin-top: 80px;
 }

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0px 0px;
}

.Content { grid-area: 1 / 1 / 3 / 6; }

.listName1 { grid-area: 1 / 2 / 3 / 3; }

.listName2 { grid-area: 1 / 4 / 3 / 5; }

<div class="grid-container">
    <div class="Content">
        <button>>></button>
        <button><<</button>
    </div>
    <div class="listName1">

        <input type="checkbox" name="emails" id="em1">
        <label for="em1">[email protected]</label><br>

        <input type="checkbox" name="emails" id="em2">
        <label for="em2">[email protected]</label><br>

        <input type="checkbox" name="emails" id="em3">
        <label for="em3">[email protected]</label><br>

        <input type="checkbox" name="emails" id="em4">
        <label for="em4">[email protected]</label><br>

        <input type="checkbox" name="emails" id="em5">
        <label for="em5">[email protected]</label><br>

        <input type="checkbox" name="emails" id="em6">
        <label for="em6">[email protected]</label><br>

        <input type="checkbox" name="emails" id="em7">
        <label for="em7">[email protected]</label><br>

        <input type="checkbox" name="emails" id="em8">
        <label for="em8">[email protected]</label><br>

        <input type="checkbox" name="emails" id="em9">
        <label for="em9">[email protected]</label><br>

        <input type="checkbox" name="emails" id="em10">
        <label for="em10">[email protected]</label><br>

    </div>
    <div class="listName2">
        <div id="emails"></div>

    </div>
</div>

как реализовать возможность перемещения элементов, что бы порядок сохрантлся. При выборм чекбокса, при нажатии кнопки ">>" они перемещаются вправо и назад так само

Answer 1

По предложенной картинке мне кажется возможно 2 варианта - правильный и извращённый, но легкий :)

правильный:

при создании списка каждому элементу поставить в соответствие некоторый атрибут my-order, в котором будет записан исходный порядок (не обязательно 1,2,3, можно и другие числа, главное чтобы отсортированными они образовывали нужный изначальный порядок)
<label /><input /> лучше завернуть в <div id = "..." class = "input-block" my-order="...">
при нажатии на кнопку >> (или <<) проходим по массиву

querySelectorall('.input-block')

копируем в listName2 и удаляем из listName1

скопированные блоки сортируем по значениям из my-order

по идее это можно сделать в 2 этапа - сначала копируем блоки из listName2 в массив, сортируем массив, удаляем все блоки из listName2, а потом формируем их из массива

простой, но извращённый

<label /><input /> лучше завернуть в <div id = "..." class = "input-block" my-order="...">
продублировать чекбоксы (блоки div) как в блоке listName1 так и в блоке listName2
если пользователь нажал >>, то проходим по div в listName2 И делаем их там видимыми (выставляем display: block;), а в listName1 делаем невидимыми (выставляем display: none)

БЛОГ НА HUSL

как реализовать возможность перемещения элементов

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