JavaScript события мыши и указателя, Drag and Drop компонент

[@AleksanderLamkov]

📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 t.me/friendlyFrontendChat Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂

[@like_that_dude]

Большое тебе спасибо за твоё время и знания которыми ты делишься бесплатно. Я надеюсь тебе хватит рвения и время закончить данный курс полностью. Очень классная подача и простым языком, понимаешь всё с первого раза. Ещё раз спасибо тебе просто огромнейшее !!

[@svitboomer8840]

Так и запишем "Загребущая рука" 😄 Спасибо за твои уроки и твой опыт, который ты передаёшь нам 🥰

[@Pavelius]

Очень полезное видео. И пример не абстракция какая-то, а хороший пример, реальный, спасибо огромное

[@smotritelyoutube]

Супер, просто пушка, еще и с полезным примером в конце, так еще и не просто функциями, а классом (в чем как раз из-за недостатка практики и есть пробелы😅), ЛАЙК!!!

[@FloGG8]

Пример в конце невероятно крутой. Но печально осознавать, что сам на данном этапе до такого не додумался бы

[@maximlodeynov7048]

очень интресная и полезная информация

[@MikitaMaiseichyk]

Спасибо! Классное видео!

[@ЯнЯновский-ж2й]

Саша, есть ошибка (14:09). Если верить документации, свойство isPrimary «указывает, является ли указывающее устройство основным для данного типа» и не отражает очерёдность нажатий в мультитаче

[@AleksanderLamkov]

Хм, спасибо за комментарий! Давай попробуем докопаться до истины. При составлении плана и материалов для этого урока, одним из источников был этот ресурс: learn.javascript.ru/pointer-events Там как раз есть такой момент: isPrimary - равно true для основного указателя (первый палец в мульти-тач). И чуть ниже идёт подробная информация про мульти-тач: Вот что происходит, когда пользователь касается сенсорного экрана в одном месте, а затем в другом: При касании первым пальцем: происходит событие pointerdown со свойством isPrimary=true и некоторым pointerId. При касании вторым и последующими пальцами (при остающемся первом): происходит событие pointerdown со свойством isPrimary=false и уникальным pointerId для каждого касания.

[@ЯнЯновский-ж2й]

@@AleksanderLamkov Понял, значит я неверно истолковал описание. Спасибо, буду знать

[@alexandraweather4156]

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

[@biscvie]

Спасибо!

[@bagrationasatryan5272]

Для использования в реальных проектах, нужно добавить защиту от алертов и иных смен фокуса окна браузера. Иначе, после отпускания указателя, когда вернемся в браузер, "еда" будет таскаться при отпущенном указателе. Этот баг даже в фигме до сих пор не исправлен😅

[@alexdexx21]

Про новые pointer-события первый раз услышал, круто, спасибо! И драг-н-дроп крутой, жаль, 90% кода списывал, т.к. только недавно познакомился с классами в целом. Вот, думаю, где практику с классами себе добыть? Буду смотреть дальше)

[@AleksanderLamkov]

На классах будем писать код в следующем мастер-классе, который выйдет в течение месяца.

[@bagrationasatryan5272]

И еще, лучше ставить захват мыши, чтобы при перетаскивании, даже при выходе указателя за пределы документа, перемещение продолжалось (при этом, контролируя не выход границы объекта за пределы документа)

[@pika4u380]

Отличная реализация, только подход с методами в addEventListener мне не нравится. Так ты никогда от них больше не отпишешься. Самый лучший способ в таких ситуациях - делать методы (обработчики событий) полями, в которых будет лежать стрелочная функция. Так и контекст останется на месте и ссылка не потеряется. А так круто, молодец)

[@FootballDayss]

Спасибо за урок! ❤А сколько видео вы планируете включить в этот курс по js, тоесть сколько ещё тем вы планируете разобрать в рамках курса? :>💐

[@AleksanderLamkov]

Ещё около 10 видео. На данный момент 43 урока в черновиках, возможно будет ещё 44-й.

[@FootballDayss]

@@AleksanderLamkov Спасибо за ваш труд! Любим вас❤🌹

[@nepcz]

@@AleksanderLamkov Следующий React ?))

[@AleksanderLamkov]

Да, но не скоро. Ещё много другого контента будет.

[@Zentu-oj6ep]

привет , после окончание курса сразу будет мастер класс ? В мастер классе будет вестка сайта с добавлением js или создание мини приложение

[@AleksanderLamkov]

Привет! Не сразу, не успею подготовить материал. Будет через недели 2 после окончания курса. В этом МК будет верстка с большим количеством JS.

[@nepcz]

если не классами, а функциями писать, будет хуже читаться код? или какой плюс в данном примере писать на классах?

[@AleksanderLamkov]

Да, хуже. Классы лучше структурируют код. Можешь про ООП почитать, будет больше понимания преимуществ классов над обычными функциями. Если кратко, то по одному шаблону можно реализовать логику любых UI-компонентов. На чисто функциях всегда будет каша в коде, даже если запихнуть функции в функции, а-ля initDnD.

[@locktar-o-dark5664]

Мурыча на тебя не хватает, жди, натравлю 😅

[@gederionmendeliny7509]

Если будете повторять пример с DND, не забудьте добавить в стили: *_img { pointer-events: none; }_* . Иначе не будет работать, а в видео про это не сказано.

[@AleksanderLamkov]

Да, про это сказать забыл, но в стилях в демке это свойство для изображений было указано. В описании к видео есть ссылка на репозиторий с кодом, вот конкретно тот самый файл стилей: github.com/aleksanderlamkov/js-course/blob/main/34.%20JavaScript%20%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D1%8F%20%D0%BC%D1%8B%D1%88%D0%B8%20%D0%B8%20%D1%83%D0%BA%D0%B0%D0%B7%D0%B0%D1%82%D0%B5%D0%BB%D1%8F,%20Drag%20and%20Drop%20%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82/drag-and-drop/styles.css

[@Polite_person_]

Зачем многие просят React? Выучите сначала уверенно JS , TS, разберитесь с ООП, SOLID. Когда знаешь хорошо основы, то выучить библиотеку не так сложно. А то классы увидели, ой а что это? Ой, а обязательно так? Да обязательно! А можно реакт? можно! Но потом😅

[@alexdexx21]

Честно говоря, реально сложно. Когда только узнал что такое классы вообще и тут такого зверя собирают >_

[@nepcz]

grab - если сущ. то это Захват

[@locktar-o-dark5664]

17:13 иэмджи, ты серьёзно? То есть ты даже английский алфавит не смог выучить. Мдэ.

[@AleksanderLamkov]

Какой кошмар. Как ты выдержал 17 минут моей речи вообще? А если без шуток, я бы на твоем месте только нейтивов и слушал, раз с языком у тебя всё так хорошо. Контента же во много раз больше.

[@locktar-o-dark5664]

Не переживай, их тоже слушаю, типичная реакция, я неуч, исправляться не собираюсь, спАн, дрАг, "загребущая рука" вообще убило, как бы технология drag and drop о перетаскивании, мог бы сказать перетаскивающая, или хватающая. Короче, учись студент. А если не знаешь, не агрессируй. Принимай критику, исправляйся.

[@AleksanderLamkov]

Да какая агрессия, что ты. Это от тебя скорее исходит. За критику, конечно, спасибо, но критиковать тоже ведь нужно правильно - ты это делать не умеешь, тебе тоже стоит этому поучиться.

[@locktar-o-dark5664]

@@AleksanderLamkov короче, начни с алфавита, а то не понятно, как ты такой серьёзный код пишешь, не зная его.

[@svitboomer8840]

​@@locktar-o-dark5664 Фу, какой ты душный. Через экран аж плохо стало. Чтобы ты обосрался поносом - вот тебе мой топ: 1. composable - компосабле 2. href - хрю (не все поймут) 3. middleware - мидлеваре 4. node.js - ноде 5. Vite - витя 6. pinia - пенёк 7. - пиктуре

[@videoSSS_741]

сложно(

[@AleksanderLamkov]

🥲

[@foraxxx]

Спасибо за уроки! Какие у вас дальнейшие планы после курса по js и вёрстке сайта с помощью js?

[@AleksanderLamkov]

Npm, Git, сборщик проектов Vite, МК по верстке с Vite, видео по новинкам CSS, UI компоненты на JS

[@foraxxx]

@@AleksanderLamkov спасибо

[@mouri_san]

Спасибо!