Drag and drop на REACT JS. Сортировка. Просто и быстро!

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

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

50% 1

В этом уроке мы быстро сделаем простую 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/BODYE821
Яндекс деньги - yoomoney.ru/to/4100116193037469

Наука

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

23 сен 2020

Ссылка:

Скачать:

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

Добавить в:

Мой плейлист

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

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

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

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

@user-je7ib6qe8y Год назад

щас блевану

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

Ты не устаешь! Спасибо огромное!

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

Ахах, после работы сразу снимать для вас ролики)) Спасибо за комментарий!)

@user-vh7cm5wy3s Год назад

Спасибо за отличный контент. Хорошая подача материала, без воды. 👍

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

Каждый раз при вбивании запроса в ютюбе скрещиваю пальцы, чтобы эта тема оказалась у тебя на канале. Пока всё в точку. круто, респект, поклон, жду 100к подписчиков

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

Вот только на днях этим интересовался, прям вовремя, спс, помог

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

Видишь, как я попал) рад что помог!

@dopetag Год назад

Как же всё-таки доступно ты объяснил! Кайф!

@VasiliyKolpaxidis Год назад

Большое спасибо за урок. Попробовал написать всё тоже самое но передав всё это через пропсы в дочерний компонент. Всё получилось + отличная практика для работы с пропсами.

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

Просто шикарно! Никаких доп. пакетов, ни сразу всё понял, надо пересматривать )) Пример выбран отличный!

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

Круто же)) спасибо!

@user-mm3sd3uh6y 2 года назад

@@UlbiTV почему у всех прогеров один и тот же голос)) я ржу просто) web developer blog, дмитрий трепачев - как будто это все один человек)

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

Блин, чувак, ты красава!

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

Спасибо друг) приятно слышать!

@user-zi9vv3zb3m Год назад

Отличный пример) помог быстро реализовать поставленую задачу, думал гараздо дольше будет. Спасибо)

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

Супер! Спасибо, это шикарно)

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

Спаааааасибо!!!

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

это именно то, что я искал! как перетаскивать объект в реакте без всяких сторонних библиотек. Спасибо!

@LeeSoftRu 9 месяцев назад

Лучший вводный видос по теме. А то уже устал искать. Спасибо!

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

Спасибо большое! Отличный контент.

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

Спасибо, очень лаконично получилось

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

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

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

Спасибо за контет! раньше и не знал что без библиотек можно днд реализовать. Спасибо за труды и продолжай дальше! =)

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

Спасибо друг!)

@user-le7jy4ow8n 2 года назад

Круто! Главное в свой json файл с данными добавьте order)

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

так как раньше не сталкивался с dnd, хотел уже тащить на проект библиотеку. Спасибо за видео, отлично просветил о возможностях реакта!

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

Спасибо дружище!) рад что полезно

@user-jf7qs7sc9q 2 года назад

Спасибо! Уже давно ставлю лайк, а потом смотрю... ни разу не ошибся :)

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

Тимур - красавчик, твои видео очень помогаю разобраться в обучении frontend. Рекомендую твой канал. Спасибо !

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

Спасибо дружище, рекомендации моего канала, высшая награда для меня)

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

Круто! Спасибо!

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

Спасибо тебе за классные уроки!!!

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

Думал будет dnd использоваться как многие любят, но нет, спасибо, было полезно, помогло сделать похожий в моем проекте.

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

Cпасибо!))

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

Спасибо за видео! делаю визуальное изменение дерева и позиционирования компонентов и твой урок прямо в тему

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

Спасибо, рад, что вам помогает!

@iraarinushkina Год назад

Спасибо за наиполезнейший контент👍

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

Какой же молодец!!

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

ахах, спасибо)

@user-yr3ub5gp3t 3 года назад

Продолжай! очень круто делаешь.

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

Продолжаю! Спасибо!

@NeoCoding Год назад

за труд спасибо, полезно подача не для слабонервных

@evgeniysumaev2353 Год назад

Отличный видос, спасибо!

@pugovica100 Год назад

Супер - легко посто и понятно!

@kuzinpeter3365 Год назад

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

@phoneringhtone9711 Год назад

Огромнейшее спасибо!!

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

огромное СПАСИБО! выручили =)

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

Спасибо огромное!)

@GoodLuck-dv2zu 2 года назад

Просто красавчик!

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

круто, очень круто)

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

Благодарю!)

@reginapopova3062 Год назад

супер, спасибо)

@user-zw5wn9cn7t 2 года назад

Спасибо большое!

@Infinity-zf8ms Год назад

Спасибо 🎉

@NeoCoding Год назад

ваще красава, спасибо за урок

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

Ты просто чудо

@user-eb5yw9ui6o 2 года назад

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

@user-yn5sq1fd5e 3 года назад

Отличное видео

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

Круто!

@kesiodev4783 Год назад

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

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

помог, спасибо!

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

Спасибо!)

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

Thank you bro !

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

Thanks, it was great

@user-kr9gm6pi6w 3 года назад

Спасибо!

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

Пожалуйста!!)

@user-cd1sr5sx2r 3 года назад

Спасибо за урок. Интересны еще две темы. Одна это придумать что то похожее при использовании Drag And Drop на мобильных устройствах. Там технология Drag не поддерживается. Если будет желание, то рассмотреть типизацию на React при использовании TS.

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

Спасибо за идеи, запишу!)

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

спасибо!

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

thanks bro, i love it.

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

Ты красавчик отвечаю

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

Хахахах чел, ну ты круто и кратко объяснил. Не люблю когда в уроке введение полчаса где рассказывают о вещах которые я и так уже знаю

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

Супер

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

Спасибо!

@alsua1297 10 месяцев назад

спасибо

@yakivkuzmenko9640 6 месяцев назад

2024 год, решаю свою задачу благодаря этому видео. Спасибо. Правда у меня почему то чуть по другому работает... Но я для себя нашел как сделать

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

То что нужно ! А можно с картинками такое сделать?

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

А если нужно чтобы табы менялись местами при событии dragover, как реализовать такой пример, ведь dragover вызывается достаточно часто, нужно какой то debounce реализовывать или центр искать, или как это сделать лучше?

@user-yk8xj1yf4f 2 года назад

За 6 с половиной минут, я понял больше чем за последние 3 часа чтения различных материалов

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

продолжай

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

спасибо !!!!!!!!!!!!!!!!

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

top!

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

thx!

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

Спасибо за объяснения! А как сделать, чтобы, когда мы захватили элемент и перемещаем его, он поменял форму и цвет, но то место, откуда мы его взяли осталось без изменений?

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

О повезло, повезло.

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

Спасибо! Маленькое уточнение. Функция sortCards(a, b){} это не сортировка, а сравнение двух карточек, т.е. компаратор, т.е. её надо назвать compareCards(a, b){}

@eeeMan2 Год назад

функцию сортировки можно упростить возвращая в sort b - a или a - b, в остальном супер

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

Класс! а как делать более сложные анимации, например когда взяли в руку, но еще не отпустили, чтобы было видно на какое место оно встанет?

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

В видео показано же!)

@alexro389 Год назад

странно что мы для onDragLeave и onDragEnd один dragEndHandler используем, код повторил с окраской беда вышла, стили совсем в других хендлерах проставил и тогда заработало. Может за 3 года разрабы код перелопатили уже 🙂

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

А как быть с ключами (keys) которые надо назначать на div-ы при map?

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

присвой айдишники карточки

@PeterYurich Год назад

Сделал! Только на телефоне же эти элементы совсем не перетаскиваются! Что сделать, чтоб работало и на телефоне?

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

Сделай пожалуйста урок по такой сортировке с сохранением позиции в бд

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

А тут по сути ничего сложного, при дропе элемента просто засылать запрос на сервер с новой позицией

@drotsyk Год назад

Почему setCardList не изменяет состояние?

@user-oc1bh7sf3c 2 года назад

Есть инфа почему такая большая скорость подачи информации?

@IIapazut Год назад

что за хоткеи alt enter? где почитать?)

@7GBars 4 месяца назад

на dragEnd не может никак возвращаться цвет, будеть возвращаться только у той которую сбросили, а у остальных в dragLeave получается

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

Чет я не пойму как sortCards узнают про параметры (a, b) если мы их туда не передаем. Я сделал все как у тебя порядок меняется тольок в консоле но не карточки, странно...

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

Туда попадают элементы массива, которые сравниваются, если в логах меняются местами обьекты, то проверьте правильность вызова сортировки и самой функции сортировки, успехов!)

@user-qj6ns8ot3l 2 года назад

@@UlbiTV То же самое. Не происходит перерисовка

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

А чем заменить ордеры можно ? Я получаю массив юзеров без ордеров 1,2,3,4 - в следствии чего реализовать dnd не получается.

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

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

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

@@UlbiTV по индексу?

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

@@i_help_you Да, но лучше чтоб какой то критерий был, по которому ты их сортируешь

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

@@UlbiTV Видео огонь. Все работает ))

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

@@i_help_you крутяк!!))

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

@user-mw4tf4fe4p 3 года назад

Если пишет, что dragStartHandler не определена, то с чем это может быть связано?

@user-il9nt4hl8u 2 года назад

const a = 1, b = 2; console.log(c);

@user-qj6ns8ot3l 2 года назад

Спасибо за видео. Один баг, не перерисовывается компонент после сортировки. Хотя сам в лог выводится отсортированные карточки. Что делать?

@user-gx8sz7ht9k Год назад

у меня вместо setCards(newData) нужно было добавить setCards([...newData])

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

А как же мобильные устройства?

@demidzigua4217 7 месяцев назад

я тья обожаю сукааа от тьебя убусь 2 года )

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

У меня не работает сортировка. Я не понял, как ты вызвал функцию sortCards, не передав туда никаких аргументов.

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

у меня после вызова sort(sortCards) просто отсортировался весь массив карточек (1, 2, 3, 4), п ри перемещении карточке порядок не меняется, хотя в логах все меняется

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

помощь уже не нужна, разобрался сам. ошибка была в другом)))) Кстати, видео крутое! Еще не видел реализации DND бе сторонних библиотек

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

Красавчик, что получилось разобраться)

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

у тебя есть акции ? я бы вложился

@user-ox4yl6gu3u 2 года назад

А зачем такая скорость подачи? Не успеваешь же подумать и воспринять информацию. Ролик же и так короткий.

@jameskeita9657 Год назад

почему бы админу не сделать видос где показывает практические задачи и решает их хотя бы как минимум по 50 как по js так и по react ??? уверен будет полезно всем !!!