Drag and drop на REACT JS. Сортировка. Просто и быстро!
ฝัง
- เผยแพร่เมื่อ 23 ก.ย. 2020
- В этом уроке мы быстро сделаем простую 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 - วิทยาศาสตร์และเทคโนโลยี
Вот только на днях этим интересовался, прям вовремя, спс, помог
Видишь, как я попал) рад что помог!
Ты не устаешь! Спасибо огромное!
Ахах, после работы сразу снимать для вас ролики)) Спасибо за комментарий!)
Блин, чувак, ты красава!
Спасибо друг) приятно слышать!
Спасибо за отличный контент. Хорошая подача материала, без воды. 👍
Как же всё-таки доступно ты объяснил! Кайф!
Огромнейшее спасибо!! Благодоря тебе я стал разработчиком! Меня взяли на работу =)
Благодаря тебе меня не взяли
щас блевану
Супер! Спасибо, это шикарно)
Спаааааасибо!!!
Лучший вводный видос по теме. А то уже устал искать. Спасибо!
Большое спасибо за урок. Попробовал написать всё тоже самое но передав всё это через пропсы в дочерний компонент. Всё получилось + отличная практика для работы с пропсами.
это именно то, что я искал! как перетаскивать объект в реакте без всяких сторонних библиотек. Спасибо!
Отличный пример) помог быстро реализовать поставленую задачу, думал гараздо дольше будет. Спасибо)
Спасибо большое! Отличный контент.
Просто шикарно! Никаких доп. пакетов, ни сразу всё понял, надо пересматривать )) Пример выбран отличный!
Круто же)) спасибо!
@@UlbiTV почему у всех прогеров один и тот же голос)) я ржу просто) web developer blog, дмитрий трепачев - как будто это все один человек)
Круто! Спасибо!
Спасибо, очень лаконично получилось
Спасибо за отзыв)
Каждый раз при вбивании запроса в ютюбе скрещиваю пальцы, чтобы эта тема оказалась у тебя на канале. Пока всё в точку. круто, респект, поклон, жду 100к подписчиков
Спасибо за наиполезнейший контент👍
Спасибо тебе за классные уроки!!!
Спасибо! Уже давно ставлю лайк, а потом смотрю... ни разу не ошибся :)
Огромнейшее спасибо!!
Супер - легко посто и понятно!
Отличный видос, спасибо!
за труд спасибо, полезно
подача не для слабонервных
Круто, спасибо большое!
Просто красавчик!
Какой же молодец!!
ахах, спасибо)
Спасибо большое!
Спасибо за контет! раньше и не знал что без библиотек можно днд реализовать. Спасибо за труды и продолжай дальше! =)
Спасибо друг!)
Спасибо за видео! делаю визуальное изменение дерева и позиционирования компонентов и твой урок прямо в тему
Спасибо, рад, что вам помогает!
Продолжай! очень круто делаешь.
Продолжаю! Спасибо!
огромное СПАСИБО! выручили =)
Спасибо огромное!)
Тимур - красавчик, твои видео очень помогаю разобраться в обучении frontend.
Рекомендую твой канал.
Спасибо !
Спасибо дружище, рекомендации моего канала, высшая награда для меня)
так как раньше не сталкивался с dnd, хотел уже тащить на проект библиотеку. Спасибо за видео, отлично просветил о возможностях реакта!
Спасибо дружище!) рад что полезно
Круто! Главное в свой json файл с данными добавьте order)
ваще красава, спасибо за урок
супер, спасибо)
круто, очень круто)
Благодарю!)
спасибо большое!
Спасибо 🎉
Думал будет dnd использоваться как многие любят, но нет, спасибо, было полезно, помогло сделать похожий в моем проекте.
Cпасибо!))
Ты просто чудо
Thank you bro !
большое спасибо ❤
помог, спасибо!
Спасибо!)
Круто!
Спасибо!
Пожалуйста!!)
Отличное видео
Thanks, it was great
спасибо!
Супер
Спасибо!
thanks bro, i love it.
Ты красавчик отвечаю
спасибо !!!!!!!!!!!!!!!!
продолжай
спасибо
2024 год, решаю свою задачу благодаря этому видео. Спасибо. Правда у меня почему то чуть по другому работает... Но я для себя нашел как сделать
top!
thx!
Хахахах чел, ну ты круто и кратко объяснил. Не люблю когда в уроке введение полчаса где рассказывают о вещах которые я и так уже знаю
Спасибо за урок. Интересны еще две темы. Одна это придумать что то похожее при использовании Drag And Drop на мобильных устройствах. Там технология Drag не поддерживается. Если будет желание, то рассмотреть типизацию на React при использовании TS.
Спасибо за идеи, запишу!)
О повезло, повезло.
За 6 с половиной минут, я понял больше чем за последние 3 часа чтения различных материалов
То что нужно ! А можно с картинками такое сделать?
Спасибо!
Маленькое уточнение. Функция sortCards(a, b){} это не сортировка, а сравнение двух карточек, т.е. компаратор, т.е. её надо назвать compareCards(a, b){}
функцию сортировки можно упростить возвращая в sort b - a или a - b, в остальном супер
Класс! а как делать более сложные анимации, например когда взяли в руку, но еще не отпустили, чтобы было видно на какое место оно встанет?
В видео показано же!)
Сделай пожалуйста урок по такой сортировке с сохранением позиции в бд
А тут по сути ничего сложного, при дропе элемента просто засылать запрос на сервер с новой позицией
А если нужно чтобы табы менялись местами при событии dragover, как реализовать такой пример, ведь dragover вызывается достаточно часто, нужно какой то debounce реализовывать или центр искать, или как это сделать лучше?
странно что мы для onDragLeave и onDragEnd один dragEndHandler используем, код повторил с окраской беда вышла, стили совсем в других хендлерах проставил и тогда заработало. Может за 3 года разрабы код перелопатили уже 🙂
Спасибо за объяснения! А как сделать, чтобы, когда мы захватили элемент и перемещаем его, он поменял форму и цвет, но то место, откуда мы его взяли осталось без изменений?
А как быть с ключами (keys) которые надо назначать на div-ы при map?
присвой айдишники карточки
5+
Почему setCardList не изменяет состояние?
что за хоткеи alt enter? где почитать?)
Есть инфа почему такая большая скорость подачи информации?
Сделал! Только на телефоне же эти элементы совсем не перетаскиваются! Что сделать, чтоб работало и на телефоне?
на dragEnd не может никак возвращаться цвет, будеть возвращаться только у той которую сбросили, а у остальных в dragLeave получается
Чет я не пойму как sortCards узнают про параметры (a, b) если мы их туда не передаем. Я сделал все как у тебя порядок меняется тольок в консоле но не карточки, странно...
Туда попадают элементы массива, которые сравниваются, если в логах меняются местами обьекты, то проверьте правильность вызова сортировки и самой функции сортировки, успехов!)
@@UlbiTV То же самое. Не происходит перерисовка
А как же мобильные устройства?
Если пишет, что dragStartHandler не определена, то с чем это может быть связано?
const a = 1, b = 2; console.log(c);
А чем заменить ордеры можно ? Я получаю массив юзеров без ордеров 1,2,3,4 - в следствии чего реализовать dnd не получается.
Можно просто менять порядок элементов в массиве
@@UlbiTV по индексу?
@@i_help_you Да, но лучше чтоб какой то критерий был, по которому ты их сортируешь
@@UlbiTV Видео огонь. Все работает ))
@@i_help_you крутяк!!))
Спасибо за видео. Один баг, не перерисовывается компонент после сортировки. Хотя сам в лог выводится отсортированные карточки. Что делать?
у меня вместо setCards(newData) нужно было добавить setCards([...newData])
я тья обожаю сукааа от тьебя убусь 2 года )
у тебя есть акции ? я бы вложился
почему бы админу не сделать видос где показывает практические задачи и решает их хотя бы как минимум по 50 как по js так и по react ??? уверен будет полезно всем !!!
А зачем такая скорость подачи? Не успеваешь же подумать и воспринять информацию. Ролик же и так короткий.
У меня не работает сортировка. Я не понял, как ты вызвал функцию sortCards, не передав туда никаких аргументов.
у меня после вызова sort(sortCards) просто отсортировался весь массив карточек (1, 2, 3, 4), п ри перемещении карточке порядок не меняется, хотя в логах все меняется
помощь уже не нужна, разобрался сам. ошибка была в другом)))) Кстати, видео крутое! Еще не видел реализации DND бе сторонних библиотек
Красавчик, что получилось разобраться)
Спасибо отвечаю, ничего личного, все лакончино и по сути. У индусов подобные туториалы по 30 минут))
Все просто и полезно, а если сортировать массив нвв укринском яззые
Как же отстойно когда автор не оставляет исходников.
Быстро
спасибо!
И вам!)