Тёмный

Изменение порядка элементов списка в React-компонентах 

Михаил Непомнящий
Подписаться 58 тыс.
Просмотров 19 тыс.
50% 1

Библиотека анимаций Framer Motion отлично работает с drag&drop, а также предоставляет отдельный компонент Reorder, специализированный на перемещении элементов относительно друг друга. Быстро и удобно.
Мои курсы по вебу с купонами:
✅ mishanep.com/
📢 Поддержка канала:
/ mishanep
www.tinkoff.ru/rm/nepomnyasch...
paypal.me/mishanep

Опубликовано:

 

1 мар 2022

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 39   
@sergeylv1411
@sergeylv1411 2 года назад
Автору огромное спасибо, очень богатая библиотека, не перестает меня удивлять!
@CharlyChaplin100
@CharlyChaplin100 2 года назад
Спасибо за хорошее и понятное объяснение! Полезная информация!
@user-cu2ng7gf4k
@user-cu2ng7gf4k Год назад
Когда появляется новая задача, которую нужно реализовать, сразу иду к вам на канал, чтобы узнать, как это сделать. Сегодня снова повезло.
@Sergey_D.
@Sergey_D. 2 года назад
Супер! То, что надо! Спасибо
@azizbekkomilov3589
@azizbekkomilov3589 2 года назад
Супер очень полезный видео спасибо огромное!! )) Можите сделать видео на эту тему толька с массовыми картинками!
@odinokun
@odinokun Год назад
Спасибо. Ваше видео помогло. Видео с анимациями в React никогда не будут лишними =)
@BorysOliinyk
@BorysOliinyk 2 года назад
Очень полезно, спасибо большое.
@user-cr1pq1wz8v
@user-cr1pq1wz8v 2 года назад
Очень полезно, спасибо!
@user-vm2db5cq1g
@user-vm2db5cq1g Год назад
Очень информативные видео, спасибо! Михаил, а не планируете выпустить видео по библиотеке react-beautiful-dnd или React-DnD? было бы интересно посмотреть про них, может какие-то необычные кейсы, да и в целом обзор библиотеки был бы супер!
@vasilemidrigan50
@vasilemidrigan50 Год назад
Thank you very much! It helped me a lot!
@alimax29
@alimax29 2 года назад
Огромное спасибо!!!!!
@user-qh2em5cb2i
@user-qh2em5cb2i 5 месяцев назад
Спасибо вам!
@vasilymedvedev3077
@vasilymedvedev3077 5 месяцев назад
Очень просто и круто
@evloev4821
@evloev4821 2 года назад
автор лучший из всех кого я смотрел) я еще до конца не досмотрел, но спрошу все же, при помощи frame motion можно сделать аull page scroll ?
@mishanep
@mishanep 2 года назад
Что конкретно вы хотите сделать?
@andreynasuto9734
@andreynasuto9734 Год назад
спасибо огромное! провозился с библиотекой DND и понял что у нее есть проблемки с мобильными устройствами, а у этой вроде все норм. Беру на вооружение.
@glebkraitcer3109
@glebkraitcer3109 9 месяцев назад
Классно. Спасибо за обзор. Михаил, а возможно подобную красоту сделать с react DnD или проще сразу на Framer motion все делать?
@mishanep
@mishanep 9 месяцев назад
У меня не было опыта работы с React DnD.
@user-nl5jh8vi7g
@user-nl5jh8vi7g 2 года назад
Интересно, все по делу, без воды. Можете сделать пример работы с React Select, если Вы им пользуетесь
@mishanep
@mishanep 2 года назад
У меня на канале есть мини проект со странами, там есть пример использования React Select
@user-nl5jh8vi7g
@user-nl5jh8vi7g 2 года назад
@@mishanep спасибо, нашел
@dimondmarcker3179
@dimondmarcker3179 Год назад
Михаил, у меня вопрос: это нормально что мы так часто копируем и вставляем эти параметры анимации? или можно как то это сделать элегантнее?
@plajboi3608
@plajboi3608 Год назад
Спасибо за замечательный контент! А как работать с redux? Просто TS запрещает передавать в onReorder НЕ useState. Ну даже если я получу тудушки с useSelector, а потом засуну их в useState и буду useEffect(ом) следить за обновлениями селектора, появляются баги, когда я изменяю состояние какой-либо тудушки. "передрагЭндДропываю", то есть меняю местами, и когда удаляю тудушку или меняю completed например, то порядок тудушек становится каким он и был изначально.
@TheEmeric
@TheEmeric 10 месяцев назад
нашел решение?
@sergey_zatsepin
@sergey_zatsepin Год назад
Ну не плавненько item сворачивается при удалении, не надо тут заливать, с прыжком(bounce) в конце. Правда это похоже просто из-за типа перехода. Вообще надо сказать, что либа хоть и эффектная, но глючная ппц и в частности с reorder интуитивно неясная в опр. ситуа. Здесь ведущий юзает простенький пример, но если скажем нужно засинхронить несколько вложенных лэйаутов(div > ul > li), то скорее всего придётся пошаманить. Плюс, есть проблемы со строгим режимом Реакта, пусть даже это не оч критично. И есть проблема с билд сборкой в Vite для Reorder как раз(f-m 7.6.19). Хз мб даже напишу орлам на разрабах. Хотя у них там и так ~230 ишьюс =)
@user-yc9gu7gr8t
@user-yc9gu7gr8t Год назад
Вопрос к знатокам, если я вместо useState из redux беру items через useSelector, какую функцию запихивать в onReorder?
@killd0z3r
@killd0z3r 11 месяцев назад
По идее, Функцию редюсера, который должен быть у тебя в слайсе, через диспатч. Он должен повторять логику onreorder
@NovikovEugene84
@NovikovEugene84 6 месяцев назад
Халява!
@TheS68123
@TheS68123 Год назад
а можно в этой библиотеке не только в одном направление меняться а также одновременно в двух? в плоскости x и y
@user-le7jy4ow8n
@user-le7jy4ow8n 2 года назад
AAaaaaahh nice
@egornikolaev3038
@egornikolaev3038 9 месяцев назад
Скажи пожалуйста, мне дали тестовое, в котором нужно реализовать функционал перетаскивания с помощью любой библиотеки для drag and drop. Можно ли сказать, что эта библиотека подходит под эту категорию? Дело в том, что в тестовом ограниченный список библиотек, которые разрешено использовать
@mishanep
@mishanep 9 месяцев назад
Framer motion не является библиотекой именно для drag and drop, но с ее помощью данная процедура тоже возможно. Узкоспециализированные библиотеки для этих целей я не использовал.
@sergeys4732
@sergeys4732 2 года назад
Вопрос, ее в проде если юзать, то надо платную версию покупать?
@mishanep
@mishanep 2 года назад
Моя компания не платила)) лицензию не читал. Вроде опен сорс обычный.
@user-cu2ng7gf4k
@user-cu2ng7gf4k Год назад
Reorder можно использовать со styled-components? Что то не могу достичь корректной работы
@mishanep
@mishanep Год назад
Не вижу препятствий
@user-cu2ng7gf4k
@user-cu2ng7gf4k Год назад
@@mishanep заработало! Подскажите, пожалуйста в двух - трех словах. Есть список и drag and drop по этому уроку. Но у списка есть сортировка (активный/не активный/все). Через .map() проходит уже сортированный список. Но если менять порядок элементов в сортированном списке, то в state попадает лишь элементы, попадающие под запросы сортировки, а все остальное затирается. Можно ли совместить drag and drop и сортировку? Как это сделать? Или может позволить перемещать элементы списка только, когда доступен весь список (сортировка - "Все")?
@RusDevel
@RusDevel Месяц назад
А как закрепить конкретную тудушку, чтоб ее нельзя было перетаскивать?
@user-zz9oe5gv9b
@user-zz9oe5gv9b Год назад
топ
Далее
Липкое меню с Framer motion
20:11
Просмотров 10 тыс.
Multiple List Drag and Drop in React [Easiest Way]
22:03
D3 BMW XM LABEL Король.
31:52
Просмотров 407 тыс.
This React Drag and Drop Component Is Magic
9:56
Просмотров 81 тыс.
React Drag and Drop List Sort Tutorial
9:54
Просмотров 16 тыс.
Drag and drop in react was a lot easier than I thought
6:16
D3 BMW XM LABEL Король.
31:52
Просмотров 407 тыс.