AtriSimone
@AtriSimone
Осваиваю Front-end

Как использовать drag'n'drop элементов между разными блоками?

Добрый день коллеги!
В эту прекрасную пятницу передо мною стала задача реализовать перетаскивание элементов разметки, которые находятся в разных блоках. При всем при этом каждый из блоков оберток для перетаскиваемых элементов подкачан плагином кастомного скролла, что делает процесс еще веселее.
Демка на codepen.io
Суть в том, что мне нужна
1) возможность перетаскивать из списка "New" в список "My" и в "Another"
2) возможность перетаскивать из списка "My" в "Another" и "New"
3) возможность обрабатывать события начала и конца перетаскивания да бы добавить еще больше свестелок))
4) во всех задействованных блоках после перетаскивания нужно ререндерить список наверное(там плагин кастомного скролла, может не правильно работать после добавления/удаления блоков)
Пробовал плагин, так как там есть фишка перетаскивания между блоками, но не сдружился он с кастомным скроллом. При обычной инициализации не работает вообще, а через коллбэк плагина кастомного скролла(инициализировал по onInit для скролла) работала только первая колонка и то внутри себя(в другие колонки блоки не перетаскивались).
Помогите советом, как реализовать такое поведение, может кто сталкивался и имеет решение.
А если попытаться реализовать так:
берем выборку блоков и вешаем ему из jQuery UI - dragable, в коллбэке ставим слушатель на событие отпускания кнопки мышки, и когда событие происходит, то проверяем положение курсора, если находится над какой то колонкой, то вставляем его туда и делаем рефреш для плагина кастомного скролла. (затрудняюсь только с тем что бы проверять находится ли курсор над нужным блоком...)
В общем молодой верстальщик нуждается в совете сообщества.
Благодарю!
  • Вопрос задан
  • 1280 просмотров
Решения вопроса 1
SkiperX
@SkiperX Куратор тега HTML
Есть еще плагин droppable, без него никак.
codepen.io/SkiperX/pen/LbBGWP
навесил droppable на сами элементы, чтобы можно было указать место куда поместить, а не только в конец колонки.
для перемещения в пустые колонки нужно добавить droppable к самой колонке по аналогии.

доки по jquery ui
jquery.page2page.ru/index.php5/JQuery_UI
https://professorweb.ru/my/javascript/jquery/level...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы