Drag-and-drop на фронтенде - делаем канбан-доску или аналог Trello

[@cyber_vandal]

Я бы не рекомендовал использовать для позиционирования top и left, а вместо них - translateY и translateX (одно свойство transform: translate(.., ..)). Это даст буст к перфомансу. Такой подход для позиционирования активно используют в анимациях, вместо top/left

[@t0digital]

О, спасибо!

[@lord8360]

Top left и т.д вызывают рефлоу браузера

[@t0digital]

Почитал, кайф. Спасибо, что написали об этом! Сделаю обновление в github репе

[@cyber_vandal]

@@t0digital рад, что мои знания пригодились)

[@nikitadushakov9432]

@@t0digital так же можно навешивать на элементы css-свойство will-change: transform, таким образом указывая браузеру, что элемент будет двигаться это позволит произвести браузеру дополнительную оптимизацию

[@abduhamidovjordan3632]

как же я соскучился по кружке где на фоне сидит какой то мужик и говорит о чем то непонятном

[@m-fusion]

Контент - зачёт. Спасибо за проделанную работу ;) Эбув - первый раз слышу такое 😂Сперва даже не вкурил о чем это ))

[@StanislavBeskaev]

Что бы не заморачиваться и не слушать загрузку страницы, довольно давно ввели атрибут defer. Он указывается при подключении скрипта js в head. Эта штука сама подключит JS строго после отрисовки всего HTML

[@weisshufer]

Рекламные вставки, от души!🤣

[@StanislavBeskaev]

Обычно на фронте принято использовать классы для CSS, а для JS data атрибуты. То есть в JS поиск элементов происходит по data атрибутам. В таком случае будет отделено отображение и логики. Если надо будет поправить наименования классов(сделать правильней по БЕМ или переход на другой CSS фреймворк и тд), то JS не надо будет менять и всё продолжит работать

[@DevALine]

Спасибо за видео. Всегда с удовольствием смотрю и узнаю что-то новое)

[@Vorono4ka]

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

[@t0digital]

Спасибооо!

[@vuuv5654]

Спасибо огромное, сейчас как раз занят созданием такой доски trello, видео очень помогло!!))

[@diplspec5758]

Круто! Спасибо большое за классное и максимально полезное видео! Как всегда топ!

[@stan7657]

Спасибо! Жду-недождусь выхода курса

[@Logeru]

Вжух) Полезное продолжение из ТГ)

[@StanislavBeskaev]

Не раз слышал от front'ов, что у них есть договорённость по расположению свойств в CSS, сначала display, размеры элемента, потом уже украшательства. По типу как в питоне порядок импортов, что бы другим разработчикам было удобней

[@VikMoc]

Алексей, благодарю за очередное классное видео!! Ты крут!!!

[@zabejaga9489]

Ничего не понял, но посмотрел с удовольствием )

[@TixxxoN]

Классное видео :) Голос похож на моего друга :) Такой же милый мишутка :) Спасибо за код, многое объяснил мне :) 👍

[@aleknsandrtronenko551]

Круто спасибо, все наглядно показал и рассказал

[@t0digital]

Рад, что полезно!

[@alexnoodles8290]

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

[@Vjidowkdkcpapqkfjfw]

Большое спасибо! Очень круто!

[@t0digital]

Рад, что полезно!

[@Mr.Moy-Gospodin]

Круто!

[@t0digital]

Благодарю, Мой Господин:)!

[@АнатолийГаврилов-ы2ь]

Пушечка

[@ГеоргВартанов]

Сразу лайк 👍

[@GeneralKiberMan]

Лооооооооооооооооооооол, учусь через LMS сейчас, только от МТИ

[@wvovaw3052]

Как же вовремя! Спасибо за опыт

[@Python_in_UA]

Дякую! Хай Бог вас благословляє! Наснаги, енергії, друзів! May be it will be funny - repeat this 'vanila JS code' but witn 'vanila PyScript' code. For pure comaring. It can be second part of this funny video, isn't it?

[@uicodeuz]

Кайф

[@eugen333eee]

Спасибо, классная работа! У меня это реализовано без визуальных эффектов в 14 строк JS. Нет эффекта расталкивания соседей, просто встает после эелемента, над которым бросил. И не знаю как реализовать драг-дроп на мобильном устройстве. Ваш вариант очевидно тоже на сработает на смартфонах. А хотелось бы)))

[@НиколайВоронин-о7ъ]

Хотел "почувствовать ветер в волосах"... Надеюсь в следующих роликах появится ссылка

[@IshuckShow]

Крутой ролик, красавец, вот именно этого можно побольше?)

[@t0digital]

Про фронтенд:)?

[@tigranrostomyan9231]

Спасибо огромное!! Очень полезное видео. Но мне очень интересно, как Вы реализовали это с фреймворком? (Кажется вы работаете с SolidJS) Просто когда я попытался провернуть такое с React, то понял что сел в лужу..

[@allford-a]

А что за академия конокрадства? Я даже загуглил😂

[@alexwrite6974]

Крутяк!!! Вопрос, можешь замутить интерфейс где выстраиваются связи между подвижными элементами, а-ля noCode программирование и запилить ролик на эту тему?

[@ВладКурлук]

Спасибо за видео. А почему не стал юзать HTML Drag and Drop API? Где есть уже нативные события перетаскивания.

[@t0digital]

Посчитал, что полезнее разобраться с вариантом полного управления процессом, в API есть ограничения, в которые (если не здесь, то в другой задаче) можно упереться

[@vovergg]

А как такой подход потом прикрутить, к примеру, к React? Во фреймворках же напрямую с DOM-элементами не работают, только с данными в основном. Я когда пробовал канбан на чистом javascript писать, то написал одну функцию, которая рендерит всё, а все изменения делал уже с массивами данных, в которых хранятся записи из карточек (с id записи и id колонки, в которой она находится) и, соответственно, с самими DOM-элементами ничего не делал, они редерятся сами при вызове функции-рендера при изменении в данных. И да, конечно же использовал Html5 drag'n'drop (прочитал в комментах, почему вам он не подходит) просто для визуализации якобы перемещения элементов (конечно же сами элементы при этом не перемещаются, а просто передаются значения в функцию по работе с данными, типа, над каким элементом находишься, там в массиве элементы меняются местами и вызывается функция-рендер).

[@АндрейКовыляев-о6и]

а что насчет тачпадов ? тоже сделали ? а с разными размерами экранов совместили ?

[@t0digital]

Этот конкретный экран под тач экраны и адаптив даже не планировали. Есть задачи, которые надо делать с компьютера. К тому же это интерфейс автора, не студента. Студеческие будут все с адаптивом и тачем.

[@sergeykapshuchenko5695]

У нас на работе активно используется днд. Больше интересно как ты бы реализовал хранение порядка этих элементов в базе данных ? При ДнД изменять порядок в бд.

[@mavrinsergei]

Подскажите, я добавил кнопку добавления элемента(который мы потом должны по колонкам перетаскивать), но на него не действует js для передвижения по колонкам что делать куда копать? все стили на нем такие же и драгебл есть

[@lyenya]

Привет. Спасибо за видео. Хочу оставить комментарий по пайтону. Я пытался учить его с ютуба, что-то понимал, что-то нет. Но в итоге он никак не дался. Через пару лет, как только он понадобился, я его освоил (азы) за неделю, и сделал 3 программы даже. А сейчас пишу большую. Вопрос : сейчас многие рекламируют профессию пайтон-разработчик, вот реально, нулёвого, обучить, если в этом нет надобности? (а просто типа перспектива - заработка, я лично считаю, что - нет)

[@t0digital]

Привет! Человека нельзя ничему научить. Человек может научиться и ему можно в этом помочь, но не более того. То есть, ещё раз, человек может только научиться, САМ. И он должен понимать, для чего он это делает. Обучаться - тяжело. Всем. И если мотивация это «ну на перспективу на всякий случай», то скорее всего её будет недостаточно. Плюс то, что не практикуешь, забывается. Вот вам понадобилось написать программу - это реальный запрос, вы сели и изучили, и сделали задачу. Так работает. А делать что-то на перспективу - не особо.

[@ivanselyt]

Почему при перечислении фреймворков ты никогда не упоминаешь Vue ?

[@t0digital]

2:05

[@merlin-ulg]

Как минимум дважды упомянул, если меня не сглючило

[@aleksandrdemidov6058]

А сколько чистого времени было потрачено вами на эту задачку?

[@unicoxr5tj417]

бро, я чет пропустил? а че случилось с разработкой проекта от А до Я? ну там, с оплатами. Я, блин, жду)

[@t0digital]

Пока нет на него времени. Lms доделаем до боевого состояния и затем доделаем донат систему. Я помню о ней

[@unicoxr5tj417]

@@t0digital буду ждать. Это унылая хренота на созвонах реальность отражает. Я аж икаю)

[@Makaler]

Я не совсем понял как работает функция определения айтема находящийся под передвигаемым айтемом? что бы потом всунуть placeholder. У нас, допустим, есть координаты передвигаемого айтема, но как понять что под нашим айтемом лежит другой айтем?

[@Makaler]

ps: кажется понял. 17:34 метод elementFromPoint() возвращает элемент по указанным координатам. Я в шоке. Не знал про такой метод.

[@t0digital]

@@Makaler да, всё так

[@Makaler]

@@t0digital 😍🔥👍

[@itforall89]

Почему в JavaScript (0.1+0.2) == 0.3 false?

[@paveltarasov4011]

Смотрю ролики ради рекламы:))

[@t0digital]

Реклама двигатель прогресса!

[@Alex-kb1ub]

А где ссылку на телегу найти?

[@t0digital]

t.me/t0digital

[@redsool1]

не клиЕнт, а клАент

[@t0digital]

Ага

[@Evervess179]

Фронт :)))))