Drag and Drop на Vue 3 / Уроки Vue

  Рет қаралды 21,584

Лукьянов Артём

Лукьянов Артём

Күн бұрын

Пікірлер: 71
@МиржалолМирхомитов-г4о
@МиржалолМирхомитов-г4о 4 жыл бұрын
Жду следующих уроков. Отличный урок. Спасибо
@prototype643
@prototype643 10 ай бұрын
Следующего видео не будет, автор не может больше заниматься данной деятельностью
@YusheeroFirsov
@YusheeroFirsov Жыл бұрын
Отличный видос по Vue и Composition API. У тебя отличная подача контента, не бросай это дело.
@CCSIB
@CCSIB Жыл бұрын
Получилось повторить и сделать перетаскивание элемента по полю (менять таким механизмом координаты элемента), отличное понятное видео.
@AlexProffe
@AlexProffe 4 жыл бұрын
Отличный и понятный видос, спасибо
@user.nickname
@user.nickname 7 ай бұрын
отличный урок, спасибо большое
@rostyslavputas5661
@rostyslavputas5661 4 жыл бұрын
Классный видос, жду еще видео с Composition API
@yakut54
@yakut54 3 жыл бұрын
Норм! Пиши ещё!! Лайк подписка колокол!
@ЛукьяновАртём-р1х
@ЛукьяновАртём-р1х 3 жыл бұрын
Спасибо!
@loadmore
@loadmore 2 жыл бұрын
Спасибо, тема раскрыта!
@standarttechnology4477
@standarttechnology4477 7 ай бұрын
круто что ты умеешь переводить официальную документацию на русский)
@egorlazuka8211
@egorlazuka8211 3 жыл бұрын
Спасибо, узнал новое для себя
@VorobyevAlexander
@VorobyevAlexander Жыл бұрын
effectAllowed и dropEffect это свойства для построения логики. Т.е. относительно типовые причины для перетаскивания: скопировать (т.е. во второй группе будет "похожий" объект), переместить (объект будет перенесен), создать символьную ссылку (один и тот же объект будет принадлежать обеим группам). Т.е. вы можете в соответствии с логикой приложения указать какая группа позволяет и с какой целью переносить объекты на себя, а с другой стороны в объекте указывать цель его переноса. И уже на уровне браузера будут "подсвечиваться" только те области куда можно перенести для заданной цели
@ИльдарИсламов-я8ч
@ИльдарИсламов-я8ч 3 жыл бұрын
Чувак, спасибо огромное!!!
@musicneon7493
@musicneon7493 4 жыл бұрын
классное видео про vue!! продолжай в том же духе
@murchenko99
@murchenko99 3 жыл бұрын
Спасибо! Продолжай пожалуйста)
@Novel6789
@Novel6789 2 жыл бұрын
а как сделать, чтобы итемы можно было сортировать как хочу, сейчас они просто по индексу сортируются
@stivem9523
@stivem9523 3 жыл бұрын
Спасибо за видосы! Круто, продолжай снимать) Подскажи а что за плагин стоит что бы так информацию смотреть по свойствам, вот когда ты н аводил на dropEffect
@nikanorra
@nikanorra 3 жыл бұрын
ide webstorm - мощная штуковина с такими вот подсказками
@luisamaral3368
@luisamaral3368 2 жыл бұрын
you saved my life, thank you
@Nikolay-ruru
@Nikolay-ruru 2 жыл бұрын
Круто, но как менять местами элементы, а не перетаскивать в другую категорию, все обыскал, но на vue 3, не могу найти.
@VorobyevAlexander
@VorobyevAlexander 2 жыл бұрын
1 Добавляем элементам (items) свойство сортировки 2 Делаем вычисляемый список в котором сортируем по этому полю и переключаем вывод на него 3 Есть событие dragover соответственно првязываем к div выводящему item обработчик этого события. В этом обработчике есть итем над котром несем, и в евенте есть координаты. сохраняем в стор. 4. при отпускании на основании координат и элемента над которым "несли" пересчитываем в массиве поле сортировки
@kekivanovich9222
@kekivanovich9222 4 жыл бұрын
Хороший канал. Я редко пишу комментари, но тут напишу. Не забивай на канал, делай больше и чаще видео, особенно по Vue. Спасибо тебе
@ЛукьяновАртём-р1х
@ЛукьяновАртём-р1х 4 жыл бұрын
Спасибо за хорошие слова!
@boomrest
@boomrest 3 жыл бұрын
Коротко и по делу, спасибо! А как переносить итем не перетаскиванием, а по клику? Первым кликом выбираем элемент (элементы), вторым кликом по категории элементы переносятся в нее? Как переделать ваш пример под эту задачу?
@ЛукьяновАртём-р1х
@ЛукьяновАртём-р1х 3 жыл бұрын
Вводите дополнительное состояние, которое сигнализирует о том что выбран элемент, который нужно перенести. В зависимости от этого по-разному обрабатываете нажатие по категории. Соответственно, когда элемент выбран - нажатие по категории переносит в нее элемент.
@КакаяразницаКакаяразница-д5щ
@КакаяразницаКакаяразница-д5щ 11 ай бұрын
Урок полезный, но не то что искал. Это скорее не перетаскивание, а замена элементов в массивах, отображаемых в разных, выделенных областях. Полноценное перетаскивание объекта - это перемещение его по экрану с размещением в произвольном месте. Хотелось бы увидеть реализацию данного варианта.
@vados7341
@vados7341 4 жыл бұрын
лайк, комментарий
@PlaceTickets
@PlaceTickets 3 жыл бұрын
Подскажите пожалуйста, как IDEшка называется?. В видео не понятно. ВьюСиЛАй?
@ЛукьяновАртём-р1х
@ЛукьяновАртём-р1х 3 жыл бұрын
Ide - JetBrains WebStorm
@dreven3769
@dreven3769 2 жыл бұрын
Почему данные могут быть не реактивные? В консоль вывожу данные они изменяются, а на странице нет)
@granmini
@granmini 3 жыл бұрын
Привет! Классное видео, очень актуальное вдруг стало. Но есть вопросики) Как применять стили для элементов, когда только взял элемент, когда подвел к нужной области, менять стиль области? Добавил бы картинку сюда для примера, что-то не знаю как...
@ЛукьяновАртём-р1х
@ЛукьяновАртём-р1х 3 жыл бұрын
Привет, спасибо за отзыв! На 0:58 приведен список всех эвентов D&D API, соответственно с помощью них можно реализовать все что нужно. На определенных эвентах меняешь состояние компонента и в зависимости от этого рендеришь то что тебе нужно. В частности с помощью события dragover можно изменить состояние так, чтобы соответсвутюще подсветилась droppable зона.
@Бензини
@Бензини 3 жыл бұрын
А как дописать так, чтобы типа собираешь из одной зоны в другую правильный набор элементов,типа, например, буквы перетаскиваешь а в другой зоне проверяется, правильное ли ты слово собрал, и если правильно, то об этом сообщение, например, цвет на зелёный меняется?
@ЛукьяновАртём-р1х
@ЛукьяновАртём-р1х 3 жыл бұрын
Делаешь в модели зоны какой нибудь флаг, который говорит о том нужна ли этой зоне валидация, потом делаешь саму функцию валидации и computed свойство, в котором через функцию map собираешь массив состояния зон. В шаблоне из этого свойства ищешь элемент с id зоны, которая рендерится в данный момент и отображаешь ее состояние если нужно.
@oleksandrlysiuk3971
@oleksandrlysiuk3971 4 жыл бұрын
Хорошее видео, но сделай шрифт размером побольше, а то нихрена почти не видно)
@ЛукьяновАртём-р1х
@ЛукьяновАртём-р1х 4 жыл бұрын
Спасибо! Учту) Хотя я специально прибавлял размер шрифта, но похоже надо будет прибавить ещё больше :)
@olegs.2152
@olegs.2152 3 жыл бұрын
@@ЛукьяновАртём-р1х не знаю в чем проблема, но что на 16, что на 24" все отлично видно
@yevheniimoskalenko1624
@yevheniimoskalenko1624 4 жыл бұрын
скажи пожалуйста, какие ты используешь расширение?
@ЛукьяновАртём-р1х
@ЛукьяновАртём-р1х 4 жыл бұрын
Для Webstorm только 2 - One dark theme и Material icons
@Артур-з4ь9е
@Артур-з4ь9е 3 жыл бұрын
Данный пример подойдет для Vue 2? Я так понимаю это нативный Drag and Drop без использования плагинов?
@ЛукьяновАртём-р1х
@ЛукьяновАртём-р1х 3 жыл бұрын
Да, так и есть. Но во vue 2 нет composition-api, но если вы посмотрите инструкцию по миграции, то сможете запросто переписать пример на options-api.
@yevheniimoskalenko1624
@yevheniimoskalenko1624 4 жыл бұрын
крутой видос)))))))
@VeseliiMolochnik
@VeseliiMolochnik 2 жыл бұрын
А как сделать чтобы при перетаскивании блок не становился полупрозрачным?
@m0kser
@m0kser Жыл бұрын
задать background-color
@ЕгорКореньков-ц3ж
@ЕгорКореньков-ц3ж 4 жыл бұрын
что за setup()? во вью есть data, props, computed, methods и тд
@ЛукьяновАртём-р1х
@ЛукьяновАртём-р1х 4 жыл бұрын
Это composition api - нововведение Vue3.
@volodymyrfursov5948
@volodymyrfursov5948 3 жыл бұрын
composition api не обязательно использовать можно далее писать на options api это дело вкуса или правил в той или иной команде.
@alexperemey6046
@alexperemey6046 2 жыл бұрын
@@volodymyrfursov5948 Оно банально удобнее. И меньше "магии". Я надеюсь, что разработчики таки рано или поздно перейдут на него и перестанут писать все эти дурацкие секции...
@romajon4515
@romajon4515 4 жыл бұрын
как называется тема на WebStorm?
@ЛукьяновАртём-р1х
@ЛукьяновАртём-р1х 4 жыл бұрын
One dark
@belek8654
@belek8654 4 жыл бұрын
Артём, а ты уже работаешь где-нибудь frontend разработчиком?
@ЛукьяновАртём-р1х
@ЛукьяновАртём-р1х 4 жыл бұрын
Официально - нет, но в целом бывают проекты частенько. Сейчас учусь в университете, поэтому не устраиваюсь официально.
@LeOon_sy
@LeOon_sy 4 жыл бұрын
@@ЛукьяновАртём-р1х а причем тут универ? Можно же параллельно
@ЛукьяновАртём-р1х
@ЛукьяновАртём-р1х 4 жыл бұрын
На полный рабочий день с учебой не устроишься.
@LeOon_sy
@LeOon_sy 4 жыл бұрын
​@@ЛукьяновАртём-р1х можно спокойно устраиваться на половину раб дня. Сам так сделал (на vue 3 удаленно).
@ЛукьяновАртём-р1х
@ЛукьяновАртём-р1х 4 жыл бұрын
Молодец!:)
@MickeyChoiTM
@MickeyChoiTM 4 жыл бұрын
Где найти оформление WebStorm как у тебя?
@ЛукьяновАртём-р1х
@ЛукьяновАртём-р1х 4 жыл бұрын
Тема One dark, в маркете плагинов в настройках WebStorm
@MickeyChoiTM
@MickeyChoiTM 4 жыл бұрын
@@ЛукьяновАртём-р1х У меня произошло нечто страшное с текстом. И я не знаю что с этим делать... imgur.com/a/WUv
@ЛукьяновАртём-р1х
@ЛукьяновАртём-р1х 4 жыл бұрын
@@MickeyChoiTM скорее всего не та тема
@KostiaBazrov
@KostiaBazrov 3 жыл бұрын
С Вуе2 пока опасно слезать .
@ЛукьяновАртём-р1х
@ЛукьяновАртём-р1х 3 жыл бұрын
Само собой, но и на Vue3 придется когда нибудь перейти, учитывая все его плюсы. Но даже так, если раньше я обожал Vue, то сейчас очень скептически отношусь к этому фреймворку т.к. он предоставляет очень смешанный опыт по реализации комплексных проектов с использованием typescript. Максимально неудобно совмещать .ts с .vue. + во Vue всегда была неприятная особенность в виде крайней непрозрачности. Во vue3 это конечно постарались исправить, но по большей части все ещё Vue - это магия. И хуки - хороший первый шаг. Конечно, возможно в итоге Vue превратится в React, посмотрим.
@АлександрИванов-ц6ф4в
@АлександрИванов-ц6ф4в 4 жыл бұрын
хера се если ты начинающий тогда я чо в зародыше еще
@ЛукьяновАртём-р1х
@ЛукьяновАртём-р1х 4 жыл бұрын
😄
@darkmatiz
@darkmatiz 3 жыл бұрын
делать ID равным 0 - фиговатенькая практика, лучше отвыкай от этого. Обычно такая ситуация, когда id=0 может означать пустой, но инициализированный какой-то объект, т.е. не валидный.
@НикитаКозлов-ь5и
@НикитаКозлов-ь5и 2 жыл бұрын
Код прям так себе, 2 видео по запросу "vue 3 drag and drop" в 2 раза кароче, в 2 раза информативней, а главное -- учит хорошим манерам написания кода. Оставляю этот комментарий для того, чтобы люди, которые пришли смотреть, понимали, что лучше учиться у других) Ссылка на прекрасное видео по этой же теме: kzbin.info/www/bejne/Y5y9fXdqZclgqqs
@alexperemey6046
@alexperemey6046 2 жыл бұрын
А еще главнее - твое видео на английском.... В остальном - два видео ничем не отличаются, только скоростью написания кода. Если это видео поставить на x2 - получится то же самое.
coco在求救? #小丑 #天使 #shorts
00:29
好人小丑
Рет қаралды 120 МЛН
“Don’t stop the chances.”
00:44
ISSEI / いっせい
Рет қаралды 62 МЛН
小丑教训坏蛋 #小丑 #天使 #shorts
00:49
好人小丑
Рет қаралды 54 МЛН
Перетягивание элементов ( drag & drop) на JavaScript
10:24
WebDev с нуля. Канал Алекса Лущенко
Рет қаралды 47 М.
Build a DropZone (Drag/Drop) Component With Vue 3 (No Library)
30:14
John Komarnicki
Рет қаралды 31 М.
#1 Зачем нужен Vue.js? - Vue.js: концепции
18:27
JavaScript.Ninja
Рет қаралды 205 М.
Todo app (список задач) на Vue 3 + Composition API  / Vue практика
25:47
🙅‍♂️🙆‍♀️ VUE 3 Ролевая модель, ограничения доступов
23:39
Мастерская разработчика
Рет қаралды 10 М.
Vue 3 фундаментальный курс от А до Я
3:01:26
Вся суть работы с внешним API на Vue | Просто объясняю Vue 3
15:24
Lectoria. Обучение веб-разработке.
Рет қаралды 19 М.