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

[@andreychernov1]

Спасибо за простой и понятный урок. Помогли разобраться в теме с первого просмотра.

[@alialiev4667]

Большое спасибо за урок, объясняете очень подробно, то, что надо 🖤 Подписка, лайк.

[@JafarkhonMuhsinov]

Здравствуйте можете снять видео по drag-n- drop на фреймворке angular

[@velich76]

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

[@WebDevSandbox]

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

[@Grigoren_com]

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

[@WebDevSandbox]

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

[@reversplay529]

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

[@bezdar_2217]

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

[@WebDevSandbox]

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

[@pavelsolomatin8827]

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

[@YarkiiYa]

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

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

С П А С И Б О ! ! !

[@blazedenshinobu]

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

[@Mr.Bellamy]

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

[@alialiev4667]

Почему у вас *clasList* не выдает ошибку ? Или я ошибаюсь, разве не с двумя буквами пишется *classList* ?

[@zolrux]

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

[@WebDevSandbox]

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

[@СветланаМирная-д6в]

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

[@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]

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

[@eugene_aleksmemov]

setTimeout помещается в очередь макрозадач, а не микрозадач. Дизлайк...........