Как переместить элемент li по клику?

Question

[Segio]

Имеется такой скрипт.
https://codepen.io/Mamikonars/pen/KYVzXM

При клике на li, а потом на кнопку, они должны перемещаться вправо или влево. Но когда выбираю li с правого блока, то выбираются из первого.. Пока искал в чем причина – много лишнего наговнокодил (как видно, не помогло ). Для каждого отделенные ul сделал, но он опять событие для первого ul выполняет?

Answer 1

[Ragtime Kitty]

В общем сори, но разобрать, что у вас там я не смогла.
Пусть будет по новой.

Суть: по клику вешаем класс "selected", по клику на кнопку копируем элементы с классом "selected", вставляем их во второй список и удаляем их из первого.



Бедный код пэн, который день уже беднягу дудосят :(

Comments

[Stalker_RED]

Зачем клонировать и удалять, если можно просто переместить?

[Ragtime Kitty]

Stalker_RED, верно, ванильный js я не очень умею, особенно работу с нодами. У вас проще и лаконичнее получилось

Answer 2

[Stalker_RED]

У вас там несколько addEventListener, которые добавляют к элементам обработчики, но ни одного removeEventListener, которые эти обработчики снимали бы.

Я бы вообще выбросил половину кода, на сами li не нужно навешивать ничего, сделайте обработчик клика только на списке-родителе (пример) и на кнопках со стрелками.

При клике по списку на кликнутый li добавляете класс с выделением, при нажатии одной из стрелок перемещаете li имеющие этот класс.

UPD: запилил еще одну версию стырив верстку у Ragtime_Kitty

Добавил выделение пунктов как в эксплорере:

Клик на элементе выделяет только его.
Ctrl(Cmd)+Клик добавляет/убирает элемент из выделенных.
Shift+Клик добавляет промежуток от последнего кликнутого к предыдущему.

Comments

[Ragtime Kitty]

В правом списке выделение странно работает

[Stalker_RED]

Ragtime_Kitty, да, косяк, список элементов запоминался при инициализации. Подправил.