Drag and drop на React. Аналог TRELLO. Доска задач

Подписаться 310 тыс.

Просмотров 47 тыс.

50% 1

В этом уроке мы сделаем drag and drop доску задач, некий аналог trello.
Текущий плэйлист -
• Drag and drop на REACT JS
React компоненты -
• ReactJS компоненты
React + Redux + Webpack
• React Redux Webpack - ...
Анимации в React -
• Анимации в React. Reac...
Разработка fullstack MERN web приложения
Frontend - • Playlist
Backend - • Playlist
Fullstack - • MERN - FullStack разра...
Поддержать меня и мой канал вы можете по ссылкам ниже.
Qiwi кошелек - www.qiwi.com/n...
Яндекс деньги - yoomoney.ru/to...

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

14 окт 2024

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 135

@theWorldIsMultivariate 2 года назад

Огромнейшее спасибо!! Благодоря тебе я стал разработчиком! Меня взяли на работу =)

@aleksandr1277 2 года назад

Спасибо! Отличный видос по работе с драгЭНДдроп. Забыл только в конце добавить - что onDrop c item нужно убрать или оставить только часть убирающую тень, иначе добавляются сразу 2 itema когда бросок происходит над item.

@mehromancer2475 2 года назад

Реально, спасибо, а то я уже подумал что делаю что то не то

@theWorldIsMultivariate 2 года назад

Огромнейшее спасибо, а то не понемал почему некорректно работает!

@АлександрСоломонов-и7ь 2 года назад

большое спасибо )

@pashadotcenko7391 2 года назад

@@АлександрСоломонов-и7ь можешь пример кода выложить с изменениями ?) а то я коментарий выше не понимаю.😅

@ИгорьТерещенко-ъ4р 2 года назад

Что значит "onDrop c item нужно убрать" я не понимаю, у меня при попытке поменять карточки местами, добавляется сразу две карточки, не могу исправить

@uzver3787 3 года назад

00:05:33 я уже испугался что всё)) Спасибо. Drag and drop на React. Аналог TRELLO.

@ruslangilyazov7733 11 месяцев назад

Ролик шёл 6 минут с хвостиком, но мне придётся это смотреть не один раз. Спасибо за информацию и разбор.

@suslikest3708 3 года назад

Спасибо автору! сверх крутое и быстрое введение в тему dnd. Единственное что в этом видосе по моему надо для онДроп задачи e.stopPropagation() добавить чтобы он по несколько задач не создавал при дропе задачи на задачу(когда уже и дроп на доске есть ну или в дропе доски может по класс нейму иф сделать).

@UlbiTV 3 года назад

Спасибо!)

@faizulla5838 3 года назад

код в студию, плиииз! ))

@javascriptoov 2 года назад

@@UlbiTV Привет, Ulbi. Пожалуйста, ответь если увидишь. При переносе элемента с доски на доску нужно, чтобы появлялось модальное окно с подтверждением. Если нажимаешь «ок», элемент переносится в задуманное место, если «нет», возвращается обратно. Есть мысли, как это реализовать?

@eghishemanukyan3021 2 года назад

@@faizulla5838 поддеоживаю )))

@AtNovember 2 года назад

@@faizulla5838 специльно поратила день чтобы создать репозиторий, могу скинуть ссылку на репу, если автор будет не против )

@oleksus_muchachus 3 года назад

Круто!! Drag and drop на React давно искал)

@UlbiTV 3 года назад

Спасибо!) надеюсь помогло

@АлМ-ы8ъ 3 года назад

Потратил пару часиков на доработку данного приложения потому как имеется разница если мы бросаем item на другом item или на board. В общем не все так просто как показал автор (поторопился). Но за идею куда впринципе тут "копать" спасибо

@rokoss 3 года назад

тоже столкнулся с этой проблемой, подскажешь как решил?

@rokoss 3 года назад

листайте комменты до конца там решение

@АлМ-ы8ъ 3 года назад

@@rokoss конечно подскажу! Берлин давай вместе возьмем?!

@rokoss 3 года назад

@@АлМ-ы8ъ в самом низу есть решение, спасибо

@АлМ-ы8ъ 3 года назад

@@rokoss ты маршал какого фронта, подлец?

@oleksandrlysiuk3971 4 года назад

Молодчик

@UlbiTV 4 года назад

Cпасиб)

@Евгений-ю9и7с Год назад

Отличное видео. Рад что нашел достойный канал с понятным объяснением и без лишней информации в видео.

@maksymdudyk1718 3 года назад

Да, ето лучший влог про Реакт. Лучший в мире!

@UlbiTV 3 года назад

хех, спасибо дружище)

@АлександрСольенов 4 года назад

Круто , большое спасибо))

@UlbiTV 4 года назад

Спасибо!)

@nereonneo 3 года назад

Круто,ето лучший влог про Реакт,продолжай ,бро

@UlbiTV 3 года назад

Спасибо бро)

@olgamatosova158 Год назад

Спасибо за уточнения про комбинацию клавиш 😊 иногда такие мелочи забываешь

@ПавлоТимощук-ш8й 3 года назад

У вас хорошая подача материала, спасибо! Для тех кто будет реализовывать ваш вариант. В функции dropCardHendler нужно еще сделать проверку если e.target.className != "название элемента". Если сделать без проверки будет добавлять по два элемента в новую доску и по два удаляться с перенесённой доски.

@UlbiTV 3 года назад

Спасибо за отзыв!)

@ПавлоТимощук-ш8й 3 года назад

@@VolNa30rus Я вроде как подробно написал, но давайте еще раз. В функции dropCardHendler нужно сделать проверку if(e.target.className !== "name-class") { тело функции }

@BorderInVais 3 года назад

@@ПавлоТимощук-ш8й еще лаконичнее, если ты добавишь в функцию dropHandler'а e.stopPropagation(). Тогда событие onDrop не будет отрабатывать у борда, можешь почитать про фазы события в js:)

@ВсадникАпокалипсиса-я9е 2 года назад

во-во. накосячил и даже не исправил ничего в видео, бесстыдник он!!

@ВсадникАпокалипсиса-я9е 2 года назад

@@ПавлоТимощук-ш8й ничего не понял, можно точный код, что там надо написать и где, а то я пытался твою проверку добавить с классом item, ничего не вышло

@aleshaspb Год назад

Круто! Сначала показалось слишком быстро, потом понял, что это даже плюс))) 💯 годный контент.

@comex1 2 года назад

Быстро и понятно. То что нужно💪

@verydifferentthought Год назад

Bruh you did an such amazing job, I can't explain my emotions 😭😢

@artempavlenko5147 3 года назад

Еще не посмотрел, но уже лайк ) отлично преподносишь материал ! #react #DragAndDrop

@UlbiTV 3 года назад

Спасибо друг!) Рад что нравится!

@kaprizov3200 3 года назад

@Ulbi TV, привет, это канбан доска?

@UlbiTV 3 года назад

Привет, типа того

@LxndrKrchvtsv 3 года назад

Привет! Спасибо тебе за материал, в очередной раз очень полезно.) Хотел спросить, возможно ли делать drag & drop из одного компонента в другой? (Условно у меня есть компонент пользователей и компонент избранные.)

@UlbiTV 3 года назад

Привет, спасибо, да, конечно!)

@faizulla5838 3 года назад

@@UlbiTV.... Аааа Каааак? ))))

@dmitriymovchan6563 3 года назад

Постой, но ты же с помошью метода splice мутируешь состояние Реакта - так же нельзя делать.

@maks-kander6665 Год назад

Вроде все написал правильно, а при перетаскивани иногда по 2 перетескивается, или копируется. Если я ставлю на место другого

@notjustgaming9422 3 года назад

Спасибо за видео. А нет ссылки на репозиторий или код, чтоб посмотреть ?

@UlbiTV 3 года назад

Спасибо! К сожалению ссылки нет

@notjustgaming9422 3 года назад

@@UlbiTV Жаль, было бы круто иметь какие-нибудь исходники, а то иногда не получается уследить за ходом мыслей и написанием кода. Но все равно большое вам спасибо!

@istinavtebe Год назад

Откуда на 2:00 там где фокус стоит сlassName = "todo" образовалось

@makeoverweb2663 4 года назад

огонь!!!

@UlbiTV 4 года назад

Благодарю!))

@makeoverweb2663 4 года назад

@@UlbiTV не подскажешь, какая поддержка у такого способа работы с dnd??мне интересно везде ли это будет работать?

@UlbiTV 4 года назад

@@makeoverweb2663 конечно, ты всего лишь изменяешь массив)) уж работа с массивами поддерживается везде!)

@UlbiTV 4 года назад

@@makeoverweb2663 вернее если быть точным, ты изменяешь состояние новым массивом, а реакт при изменении состояния делает перерендеринг)

@makeoverweb2663 4 года назад

@@UlbiTV это понятно, спасибо. А именно сам захват компонента, например на планшетах или мобилках, везде работает?

@rokoss 3 года назад

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

@UlbiTV 3 года назад

Да я обычно оставляю ссылки на исходники, но не везде

@Leon-rv2zm 2 года назад

Комментарий поддержки. Спасибо за контент

@javascriptoov 2 года назад

Привет, Ulbi. Пожалуйста, ответь если увидишь. При переносе элемента с доски на доску нужно, чтобы появлялось модальное окно с подтверждением. Если нажимаешь «ок», элемент переносится в задуманное место, если «нет», возвращается обратно. Есть мысли, как это реализовать?

@obezyankaa4437 Год назад

очень было интересно, помогло в работе мне это видео ! круто что есть донатные ссылку !

@aleksandrnadtochyi9475 3 года назад

круто! именно то что нужно было

@UlbiTV 3 года назад

Спасибо!)

@anastasiagrigoryeva6971 2 года назад

Еще бы ссылку на гид , было бы замечательно

@mikhailreznichenko8035 3 года назад

Интересно!

@IT-Svyatoslav 3 года назад

Респект! Благодарю

@yaroslavbozhak9107 3 года назад

Супер!

@tuku_mann 2 года назад

@alexandrelagin5490 3 года назад

Прекрасно! Эх сюда бы ещё Mobx прикрутить и развить тему по сложнее по функционалу )) Эх мечты, мечты..

@UlbiTV 3 года назад

мобХ скоро будет, к выходным готовлю оч обьемное видео

@alexandrelagin5490 3 года назад

@@UlbiTV Тимур Вы нас очень часто балуете.

@Vlad-us9xt 2 года назад

Top!

@medokuk8644 2 года назад

Спасибо за уроки! Подписан!

@TwelveYou 2 года назад

Хороший крутой подробный урок.

@denisoleksyuk5346 3 года назад

Топ!!!

@RNikSan Год назад

Спасибо бро )) надо еще апи прикрутить и будет счастье ))

@RomaShtep Год назад

увОжееееение!!!!! Спасибо!

@alsua1297 Год назад

спасибо

@ВладикГеранин 3 года назад

cool

@MrRonnieJamesDio 3 года назад

А есть способы сделать такие же вещи для мобильных девайсов ? с поддержкой события касания?

@UlbiTV 3 года назад

Следить за touchstart, touchend, touchmove событиями)

@MrRonnieJamesDio 3 года назад

@@UlbiTV да это я знаю, но вот как определять ,что перетаскиваемый объект находится над таким же объектом если это список с сортировкой(как например музыка в ВК) или ,что он находится над подобным его родителю если это что-то типа Trello.

@ВсадникАпокалипсиса-я9е 2 года назад

@@MrRonnieJamesDio Дио жил, Дио жив, Дио будет жить! Да здравствует металл!!

@mtb-love-belarus 2 года назад

ТОП!!!!!!!!!

@marovicmarin2243 5 месяцев назад

Проблема этого (а еще и предыдущего) урока в том, что такой функционал можно легко переписать на JS, не добавляя React. Что делать, если, например, мы разобьём каждый board на отдельные компоненты, а затем нам нужно будет item перенести из одного компонента в другой? То есть нету применения каких-то отличительных и принципиальных логик, которые отличают React от HTML + CSS + JS.

@UlbiTV 5 месяцев назад

А такие отличительные, принципиальные «логики» существуют?) логика вся на js пишется

@marovicmarin2243 5 месяцев назад

@@UlbiTV не, оно и понятно, что React написан «поверх» JS, как тот же TS. Но работа с React - это в первую очередь работа с jsx компонентами и как они взаимодействуют друг с другом. Кому как тебе не знать, я по твоим видео к собесу готовился (но это уже совсем другая история). Тут же у тебя все делается в одном компоненте. У меня просто проблема, что я не понимаю, как мне взять item с одного компонента и перенести его в другой компонент.

@iGotton 3 года назад

@artas3927 Год назад

Как реализовать подобное на redux-toolkit, что-то голову сломал при переносе

@_mshn7386 3 года назад

калечный dnd

@ВсадникАпокалипсиса-я9е 2 года назад

почему калечный?

@Илья-э7ж Год назад

что за расширение подсказывает типы данных, в vsCode есть такое? кто знает?

@pie_company 2 года назад

но на трелло когда берешь элемент он не прозрачный...вот мне тоже надо стилизовать взятый элемент

@nurbolotturatbekuulu4097 3 года назад

Хай . Твои ссылки выбрасывает в браузер гугл. а не плейлист.

@UlbiTV 3 года назад

Привет. Да, я удалил эти плейлисты, надо подчистить описание) Спасибо!

@nurbolotturatbekuulu4097 3 года назад

@@UlbiTV да за видеосы спасибо.

@SemenAlexndrovich 3 года назад

Круто! Кажется я нашёл еще один канал для регулярного просмотра =)

@UlbiTV 3 года назад

Приятно слышать!) спасибо!

@PeterYurich Год назад

Не работает в браузере телефона! Что сделать, чтоб и там работало? Очень надо!

@ВсадникАпокалипсиса-я9е 2 года назад

Ты хоть проверял свой код вообще??? Он неправильно работает! При перемещении элементы пропадают и двоятся!!

@kepamuk1 Год назад

блин надо выкладывать заготовку ( с ксс и данными

@danilfateev9234 3 года назад

А как туда добавить новые задачи?

@danilfateev9234 3 года назад

кста, я это сам решил const addNewItem = item => { if (item !== '') { const newItem = { id: Date.now(), title: item.toString() } setCurrentBoard([...boards, boards[0].items.push(newItem)]); } else { alert("Не-а, у тебя ничего не получится Джон Сноу :)") }

@heybronicedick3543 2 года назад

@@danilfateev9234 а не подскажешь как удалить?

@maks-kander6665 Год назад

Было бы очень круто, если бы ты код скидывал

@maximzhuravlyov9530 3 года назад

Сделано абы как, лишь бы контент был. При попытке вставить задачу между двух других она попросту дублируется. И это невозможно было не заметить при подготовке видео.

@МаксимРыжиков-ы1п 3 года назад

в функции dragCardHandler добавил проверку и все заработало const currentId = board.items.map(item => item.id) if (!currentId.includes(currentItem.id)) { board.items.push(currentItem) const currentIndex = currentBoard.items.indexOf(currentItem) currentBoard.items.splice(currentIndex, 1) setBoards(boards.map(b => { if (b.id === board.id) { return board } if (b.id === currentBoard.id) { return currentBoard } return b })) }