Перетягивание элементов ( drag & drop) на JavaScript
HTML-код
- Опубликовано: 8 окт 2020
- Курс JS 2.0: itgid.info/course/javascript-2
Курс HTML для JS разработчиков: itgid.info/course/html
Телеграмм канал: t.me/itgid_info
Телеграмм автора: telegram.me/alex_luschenko
супер! всегда это казалось какой то магией :) а тут все реально просто, спасибо! у Вас талантище объяснять вещи простым языком.
Офигенно полезное видео!!! В основном сейчас библиотеки везде, но так кайфово узнать как это работает под капотом. Огромное спасибо!
Super, ochen ponravilos!!!!! I voobshe ochen krutie video u vas, malenkie obzornie i v tochku
только искал инфу про drag-drop! супер!
Огромное спасибо! Давно интересовал этот вопрос.
Отличный урок! Необходимая база разобрана
Ждал. Про drag and drop много инфы, но Ваша методика, без преувеличения, топ. Спасибо.
увы не моя. Это упрощенный код одного из ведущих разработчиков в области JS ( как и идея с вопросом о append) из предыдущего видео.
@@itgid зато Ваша подача и объяснение это действительно ТОП!
Это был первый русскоязычный "тренинг" который я послушал за последние 5-6 лет, и я не пожалел времени которое потратил. Спасибо тебе большое за труды.
Хорошее объяснение, но простенькое задание. Как сделать, чтобы внутри одного блока перемещалась картинка. Это что-то вроде координат по x и y?
Спасибо, я такое раньше не встречала, обязательно применю на практике.
Огромное спасибо, аж голова болела от неудачных попыток понять драгон дроп, а тут за 10 минуток всё поня
Ого! Круто! Спасибо Тебе )
Спасибо вам большое !!!
О, видео очень кстати. Как раз в мыслях был небольшой проект с использованием этих методов.
у меня тоже
Надо попробовать!
Здравствуйте, спасибо за урок, полезно!
Подскажите, пожалуйста, в чем может быть причина почему у меня не подсвечивается в VS Code "event" и, соответственно, все подсказки с ним после точки?
Установлен плагин "JavaScript (ES6) code snippets".
Спасибо большое!
Круто!) +++ drag & drop
Спасибо!
Как вовремя, за урок спасибо.
Топ спасибо оч круто!
Только картинку увидел и сразу лайк.
Thank you!)
отличное видео
Привет! Спасибо за урок!
ПОдскажите, а можно ли оставлять элемент там где мы его бросили и как это делать, присваивать новый класс брошенному элементу или можно как то по другому?
Классный канал
Спасибо
Уважаемый автор, благодарю за видео. Подскажите пожалуйста, как это сделать в элементоре с фотографией например?
очень хотелось бы чтобы вы показали как применять этот функционал на слайде, спасибо
Интересный урок, спасибо!
Вот бы еще ручную сортировку какого-нибудь списка перетаскиванием. :)
Поддерживаю.
@@sergeypinchukov6024 тоже
@@itgid Значит ждем второй урок)
Я такой урок на англоязычном канале нашёл, но этот тоже посмотрел, чтобы сначала переварить первую часть😂
@@zakhariihusar6975 Можешь дать ссылку на англоязычный канал ?
Круто
Классно
ага, аппендить понятно, но вот как он удаляется из той или и ной зоны ?
👍👍👍
ох этот dnd... сколько он мне нервов помотал когда надо было без html5 реализацию сделать на реакте и чтобы это работало максимально быстро
Xbasic Game вы не поверите но первая аналогия на d&d была другая
19 секунд назад.. рекорд по попаданию на видос)
Это только мышкой работает или в сенсорном экране тоже работает?
Нормас с утра под молочко зашло
Было бы классно увидеть, как перетаскивать несколько элементов. Потому что с одним элементом все вроде понятно, но стоит подключить ещё второй элемент для перетаскивания и начинаются проблемы. Понятно что нужно их перебрать. Но проблема в том, как правильно этот перебор сделать. Я уже полгода мучаюсь и не могу ни у кого найти объяснения, как это сделать. Все показывают drag and drop исключительно с одной картинкой.
Нашел выход?
@@catsapp да, конечно я нашла выход. Я простенькую игру делала. Ну она работает, с косячками правда, но в целом прикольно получилось.
@@VIJana79 Здорово!
@@catsapp ты мне помочь хотел или тебе подсказка нужна?
@@VIJana79 Нет просто сам хочу написать свой скрипт с перетаскиванием
Привет и спасиба за бесплатный курс, пж сделай этот курс до уровня джуниора
Вы планируете продолжать ООП в PHP и дальнейший переход на Laravel?
ООП да. Фреймворки - пока думаю.
@@itgid ждем
Давай dnd на реакте, очень интересно
Здрасьте)
1:27 Дрэгэйбл 😁
Здравствуйте, спасибо за урок, все понятно и информативно. По поводу ошибки с перетаскиванием нашел такое решение - строчка event.target.append(document.getElementById(itemId)); была заменена на event.currentTarget.append(document.getElementById(itemId));
работает
надо бы пример с циклом, ведь у нас может быть не 2 блока, а 10 столбиков а ля таск менеджер, мы же не будем вешать функцию drop на каждый столбик отдельно)
отличная идея. Сделаю!
Ага и 10 обработчиков на каждый столбик? А если их 100? 1000?
@@Cindorqw кто об этом сказал? Вы реально думаете циклом будут вешать?
Интересно, под этим видосом тоже будут писать, что так уже никто не делает, и что уже все давно фреймворками пользуются? )))) И на собесе, на вопрос "Как реализовать драг-н-дроп?", первым пунктом в ответе будет "Настроить сборку проекта под реакт, подключить туда компонент драг-н-дропа" и готово
Павел Арсеев конечно будут
Нет не будут, потому что здесь в отличие от прошлого видоса прикладная инфа, а не сферический конь, странно написанный ещё и с вопросом «а что будет?»
Разница в актуальности и адекватности материала видна невооружённым глазом
@@Basmete а как сделать чтобы при перетаскивании он исчезал в исходном месте и не прозрачневел во время перетаскивания?
@@user-mm3sd3uh6y +
Александр, контент - огонь. Респект от начинающего вайтишника. Только вот Ваше произношение английских слов режет слух англоговорящих соотечественников немного.
А как сделать чтобы после обновления все осталось на месте?
нужно где-то сохранять изменения на странице. Можно либо в LS, либо на сервере (более сложный вариант)
Так и не дождался приклади с многими елементами)
Не знаю, уж больно странное решение наверное. Да и потом, на самом деле мы не перемещаем в любую доступную область блок, а лишь имитируем перемещение div. Как для урока, полезно, но на практике такое не просят делать. Если что-то перемещать, то перемещать реально.
А вы точно видео смотрели?
то есть все так просто? а я пыталась через mouseup/mousemove/mouseover все это делать🤦♀
Только узнал что это такое, уже почти год джуном работаю, точнее не сталкивался с такой задачей, но все равно спс.
дружище как ты попал на первый собес? и в каком городе это было?
у меня с хх.ру одни отказы даже на простое стажерство, хотя по моему скромному мнению спокойно могу потянуть вопросы на джуна
@@DzhavidR На удаленку, вероятно, почти нет шансов попасть. Сам ищу, но также только отказы или игнор, даже до собеседования не доходит. Полагаю, что у миддлов и выше нет таких проблем. Выходит нужно развиваться каким-то образом самостоятельно...
@@n5dev948 найдешь работу, чиркни, бухнем по этому поводу, но только чайку с плиткой с орехами - для мозга :D
@@DzhavidR Это у молодых так, а у возрастных как я наверное шансов ноль
Зачем через старый 'on' назначать событие, если уже давно есть addeventlistener? Потом говорите, что вас хейтят
не легко догадаться
+
А я майже нічого не зрозумів......
автор глупый, в конце не раскрыл тему до конца а сказал что это легко и вы догадаетесь
Преподаватель может быть и глупым, главное побудить вас думать