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

В этом уроке мы быстро сделаем простую 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...

[@devorer77]

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

[@UlbiTV]

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

[@alexandrelagin5490]

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

[@UlbiTV]

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

[@ВсадникАпокалипсиса-я9е]

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

[@theWorldIsMultivariate]

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

[@МитяА-р5к]

щас блевану

[@ДанилДмитриев-я5м]

как успехи

[@theWorldIsMultivariate]

​@@ДанилДмитриев-я5м успехи в чем? В работе?

[@ДанилДмитриев-я5м]

@@theWorldIsMultivariate да

[@theWorldIsMultivariate]

Успехи отличные, вырос из джуна до мидла, зарплату каждые пол года поднимают, компания нравиться. Не голера)) Работаю уже третий год

[@Quentinrei]

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

[@jsmonstr9638]

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

[@UlbiTV]

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

[@kolyabokov88]

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

[@UlbiTV]

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

[@LeeSoftRu]

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

[@makeoverweb2663]

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

[@UlbiTV]

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

[@dzmitrykubarski1462]

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

[@UlbiTV]

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

[@aleksandrmatyka3118]

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

[@UlbiTV]

Cпасибо!))

[@ashimov1970]

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

[@PZNV_Media]

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

[@еленанайчук-е1я]

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

[@falsetrue7910]

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

[@UlbiTV]

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

[@VasiliyKolpaxidis]

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

[@vovaer5003]

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

[@UlbiTV]

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

[@dopetag]

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

[@АндрейНи-э9р]

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

[@fil4777]

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

[@UlbiTV]

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

[@ЕвгенийВоронков-ч2э]

супер помогло! как раз искал! красавчик улбик!)))

[@Гилфойл-т4я]

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

[@barbatage5078]

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

[@UlbiTV]

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

[@yakivkuzmenko9640]

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

[@bigenough2122]

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

[@UlbiTV]

Благодарю!)

[@rokoss]

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

[@UlbiTV]

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

[@ЕвгенийКутовой-й6ы]

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

[@UlbiTV]

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

[@tatianavorobieva3502]

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

[@aleksandr1277]

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

[@zakhariihusar6975]

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

[@NeoCoding]

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

[@GoodLuck-dv2zu]

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

[@lingomotivator]

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

[@iGotton]

Супер

[@UlbiTV]

Спасибо!

[@phoneringhtone9711]

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

[@ИгорьГрибов-в6м]

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

[@iraarinushkina]

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

[@acceptasis2395]

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

[@rudolfsikorsky7900]

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

[@user-ur4nx2vt5x]

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

[@МаксимИванов-ф8р]

Спасибо!

[@UlbiTV]

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

[@АлексейЛоскутников-ю4р]

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

[@UlbiTV]

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

[@dilshodusmonov3184]

Thank you bro !

[@eeeMan2]

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

[@ВладиславСвидерский-г6й]

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

[@aleksandrnadtochyi9475]

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

[@UlbiTV]

Спасибо!)

[@Vlad-us9xt]

top!

[@UlbiTV]

thx!

[@nikitafox7850]

Круто!

[@denisoleksyuk5346]

Thanks, it was great

[@kesiodev4783]

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

[@NeoCoding]

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

[@kuzinpeter3365]

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

[@evgeniysumaev2353]

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

[@alexd1723]

продолжай

[@reginapopova3062]

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

[@styxrus]

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

[@ЕвгенийВоронков-ч2э]

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

[@Hande_hoch]

спасибо!

[@UlbiTV]

И вам!)

[@alexro389]

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

[@__kawaii]

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

[@feddim9624]

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

[@zizzxiii2714]

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

[@ignorepeople9514]

thanks bro, i love it.

[@atlasua2021]

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

[@alsua1297]

спасибо

[@aleksandrmatyka3118]

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

[@sergeykudryashov9097]

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

[@nurbolbaimahambetov2477]

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

[@mariaromanova1442]

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

[@UlbiTV]

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

[@PeterYurich]

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

[@7GBars]

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

[@andyrey840]

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

[@UlbiTV]

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

[@ВячеславКузнецов-ъ3щ]

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

[@pawelko4737]

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

[@UlbiTV]

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

[@seekthetruth5458]

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

[@i_help_you]

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

[@UlbiTV]

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

[@i_help_you]

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

[@UlbiTV]

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

[@i_help_you]

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

[@UlbiTV]

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

[@drotsyk]

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

[@Коржик-щ4ф]

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

[@ooops4333]

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

[@IIapazut]

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

[@kirillshapovalov495]

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

[@kirillshapovalov495]

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

[@kirillshapovalov495]

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

[@UlbiTV]

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

[@Марина-е2ъ5г]

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

[@ОлегРепашевский-н1д]

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

[@ВатквизДеСад]

у меня при перерисовке массива не срабатывает событие dragEnd :((

[@Xeon83]

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

[@jameskeita9657]

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

[@DmytroTorop]

Спасибо отвечаю, ничего личного, все лакончино и по сути. У индусов подобные туториалы по 30 минут))

[@ВячеславКузнецов-ъ3щ]

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

[@СаняКувалда-у4х]

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

[@Quentinrei]

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

[@sergnazarchuk1003]

5+

[@demidzigua4217]

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

[@ВладимирЛитовченко-ш3н]

Все просто и полезно, а если сортировать массив нвв укринском яззые

[@mrgarm2205]

Как же отстойно когда автор не оставляет исходников.

[@ДанилДмитриев-я5м]

самому написать не судьба? копипастер

[@ruslangilyazov7733]

Быстро

[@WebEnv]

спасибо!

[@Infinity-zf8ms]

Спасибо 🎉