Как создать drag-n-drop функциональность без библиотек

В этом видео я покажу вам, как создать drag-n-drop функциональность без использования каких-либо библиотек. Следуя простым шагам, вы сможете разобраться какие события существуют в JS для работы с dnd, а главное поймете как именно нужно их обрабатывать.
••••••••••••••
0:00 Описание проекта
0:21 Добавление HTML & CSS
4:21 Теория по событиям drag-n-drop
7:13 Разбираемся с JavaScript
12:06 Вносим доработки в CSS
15:16 Окончание
••••••••••••••
Спасибо за внимание ♥︎

[@velich76]

Офигенно )) Просто понравилось) И даже не в теме дело ( тема интересная - тут безусловно) а просто приятно было смотреть ( и я не знаю в чем тут магия))) Удачи в развитии канала!

[@WebDevSandbox]

Спасибо за отзыв, очень приятно)

[@YarkiiYa]

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

[@Grigoren_com]

топчик)
кратко и понятно
спасибо)

[@WebDevSandbox]

Привет, спасибо за фидбек)

[@reversplay529]

Спасибо огромное, очень помогло))

[@bezdar_2217]

спасибо, очень коротко и очень понятно)

[@WebDevSandbox]

Привет, рада, что зашло)

[@b-o-t-l-y]

С П А С И Б О ! ! !

[@pavelsolomatin8827]

А можно сделать в hold opacity - 0 вместо таймаута? Вроде бы визуально тот же эффект.

[@blazedenshinobu]

Спасибо за видео. Можете объяснить про this.className = 'invisible'. Я не понимаю, как это работает

[@Mr.Bellamy]

просто убирает все классы что мы до этого навешивали на перетаскиваемый блок, чтобы он стал невидимый. На самом деле он там есть. Скорее более бы органичней выглядел код className = "" (опустошаем классы)

[@zolrux]

Подскажи что за тема стоит на vs code?

[@WebDevSandbox]

Вот эта: marketplace.visualstudio.com/items?itemName=BeardedBear.beardedtheme
Вариант: Bearded Theme Arc

[@user-zp3no2xy9q]

Хорошо, бы исходники ((((_))))

[@WebDevSandbox]

Привет, лови github.com/GuVictory/mini-projects/tree/main/drag-n-drop

[@MrVertu01]

Привет, а если со смещением?

[@WebDevSandbox]

Привет, по какое смещение идёт речь?)

[@Maxim9575]

@@WebDevSandbox имеется ввиду возможность перемещать элементы между собой

[@Mr.Bellamy]

@@Maxim9575 ну а чо там, остальное уже банальный код js. запоминаешь где чо было, меняешь местами при дропе. Или сортируешь, в зависимости от задачи

[@Maxim9575]

@@Mr.Bellamy я то знаю как все это делается. Я лишь высказал предположение что имел ввиду ТС

[@Mr.Bellamy]

@@Maxim9575 я чет подумал коммент и первое сообщение от одного человека, когда отвечал)

[@pitaki]

чет не понял прикола с таймаутом. зачем он там?

[@WebDevSandbox]

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

[@Mr.Bellamy]

Чтобы понять надо знать как работает ивент луп. Кстати, тайммаут это макротаска, а не микро как сказано в видео.
На основе нашего элемента формируется "фантомная" полупрозрачная копия, которую мы перетаскиваем в браузере. Если просто снять все классы, то эта копия будет невидимой тоже и мы будем перетаскивать воздух. Из-за сет таймаута мы ставим удаление всех классов в самый конец выполняемых задач и получается так, что сначала браузер создает фантомную копию, которую мы хотим, а только потом изначальный объект который мы дропаем становится невидимый.