effectAllowed и dropEffect это свойства для построения логики. Т.е. относительно типовые причины для перетаскивания: скопировать (т.е. во второй группе будет "похожий" объект), переместить (объект будет перенесен), создать символьную ссылку (один и тот же объект будет принадлежать обеим группам). Т.е. вы можете в соответствии с логикой приложения указать какая группа позволяет и с какой целью переносить объекты на себя, а с другой стороны в объекте указывать цель его переноса. И уже на уровне браузера будут "подсвечиваться" только те области куда можно перенести для заданной цели
Спасибо за видосы! Круто, продолжай снимать) Подскажи а что за плагин стоит что бы так информацию смотреть по свойствам, вот когда ты н аводил на dropEffect
Привет! Классное видео, очень актуальное вдруг стало. Но есть вопросики) Как применять стили для элементов, когда только взял элемент, когда подвел к нужной области, менять стиль области? Добавил бы картинку сюда для примера, что-то не знаю как...
Привет, спасибо за отзыв! На 0:58 приведен список всех эвентов D&D API, соответственно с помощью них можно реализовать все что нужно. На определенных эвентах меняешь состояние компонента и в зависимости от этого рендеришь то что тебе нужно. В частности с помощью события dragover можно изменить состояние так, чтобы соответсвутюще подсветилась droppable зона.
Урок полезный, но не то что искал. Это скорее не перетаскивание, а замена элементов в массивах, отображаемых в разных, выделенных областях. Полноценное перетаскивание объекта - это перемещение его по экрану с размещением в произвольном месте. Хотелось бы увидеть реализацию данного варианта.
Коротко и по делу, спасибо! А как переносить итем не перетаскиванием, а по клику? Первым кликом выбираем элемент (элементы), вторым кликом по категории элементы переносятся в нее? Как переделать ваш пример под эту задачу?
Вводите дополнительное состояние, которое сигнализирует о том что выбран элемент, который нужно перенести. В зависимости от этого по-разному обрабатываете нажатие по категории. Соответственно, когда элемент выбран - нажатие по категории переносит в нее элемент.
А как дописать так, чтобы типа собираешь из одной зоны в другую правильный набор элементов,типа, например, буквы перетаскиваешь а в другой зоне проверяется, правильное ли ты слово собрал, и если правильно, то об этом сообщение, например, цвет на зелёный меняется?
Делаешь в модели зоны какой нибудь флаг, который говорит о том нужна ли этой зоне валидация, потом делаешь саму функцию валидации и computed свойство, в котором через функцию map собираешь массив состояния зон. В шаблоне из этого свойства ищешь элемент с id зоны, которая рендерится в данный момент и отображаешь ее состояние если нужно.
1 Добавляем элементам (items) свойство сортировки 2 Делаем вычисляемый список в котором сортируем по этому полю и переключаем вывод на него 3 Есть событие dragover соответственно првязываем к div выводящему item обработчик этого события. В этом обработчике есть итем над котром несем, и в евенте есть координаты. сохраняем в стор. 4. при отпускании на основании координат и элемента над которым "несли" пересчитываем в массиве поле сортировки
@@volodymyrfursov5948 Оно банально удобнее. И меньше "магии". Я надеюсь, что разработчики таки рано или поздно перейдут на него и перестанут писать все эти дурацкие секции...
Само собой, но и на Vue3 придется когда нибудь перейти, учитывая все его плюсы. Но даже так, если раньше я обожал Vue, то сейчас очень скептически отношусь к этому фреймворку т.к. он предоставляет очень смешанный опыт по реализации комплексных проектов с использованием typescript. Максимально неудобно совмещать .ts с .vue. + во Vue всегда была неприятная особенность в виде крайней непрозрачности. Во vue3 это конечно постарались исправить, но по большей части все ещё Vue - это магия. И хуки - хороший первый шаг. Конечно, возможно в итоге Vue превратится в React, посмотрим.
делать ID равным 0 - фиговатенькая практика, лучше отвыкай от этого. Обычно такая ситуация, когда id=0 может означать пустой, но инициализированный какой-то объект, т.е. не валидный.
Код прям так себе, 2 видео по запросу "vue 3 drag and drop" в 2 раза кароче, в 2 раза информативней, а главное -- учит хорошим манерам написания кода. Оставляю этот комментарий для того, чтобы люди, которые пришли смотреть, понимали, что лучше учиться у других) Ссылка на прекрасное видео по этой же теме: th-cam.com/video/-kZLD40d-tI/w-d-xo.html
А еще главнее - твое видео на английском.... В остальном - два видео ничем не отличаются, только скоростью написания кода. Если это видео поставить на x2 - получится то же самое.
Жду следующих уроков. Отличный урок. Спасибо
Следующего видео не будет, автор не может больше заниматься данной деятельностью
Отличный видос по Vue и Composition API. У тебя отличная подача контента, не бросай это дело.
Отличный и понятный видос, спасибо
Классный видос, жду еще видео с Composition API
Получилось повторить и сделать перетаскивание элемента по полю (менять таким механизмом координаты элемента), отличное понятное видео.
классное видео про vue!! продолжай в том же духе
отличный урок, спасибо большое
Спасибо, узнал новое для себя
Спасибо, тема раскрыта!
Чувак, спасибо огромное!!!
Спасибо! Продолжай пожалуйста)
круто что ты умеешь переводить официальную документацию на русский)
effectAllowed и dropEffect это свойства для построения логики. Т.е. относительно типовые причины для перетаскивания: скопировать (т.е. во второй группе будет "похожий" объект), переместить (объект будет перенесен), создать символьную ссылку (один и тот же объект будет принадлежать обеим группам). Т.е. вы можете в соответствии с логикой приложения указать какая группа позволяет и с какой целью переносить объекты на себя, а с другой стороны в объекте указывать цель его переноса. И уже на уровне браузера будут "подсвечиваться" только те области куда можно перенести для заданной цели
лайк, комментарий
крутой видос)))))))
Норм! Пиши ещё!! Лайк подписка колокол!
Спасибо!
Хороший канал. Я редко пишу комментари, но тут напишу.
Не забивай на канал, делай больше и чаще видео, особенно по Vue.
Спасибо тебе
Спасибо за хорошие слова!
Спасибо за видосы! Круто, продолжай снимать) Подскажи а что за плагин стоит что бы так информацию смотреть по свойствам, вот когда ты н аводил на dropEffect
ide webstorm - мощная штуковина с такими вот подсказками
Привет! Классное видео, очень актуальное вдруг стало.
Но есть вопросики)
Как применять стили для элементов, когда только взял элемент, когда подвел к нужной области, менять стиль области?
Добавил бы картинку сюда для примера, что-то не знаю как...
Привет, спасибо за отзыв! На 0:58 приведен список всех эвентов D&D API, соответственно с помощью них можно реализовать все что нужно. На определенных эвентах меняешь состояние компонента и в зависимости от этого рендеришь то что тебе нужно. В частности с помощью события dragover можно изменить состояние так, чтобы соответсвутюще подсветилась droppable зона.
Урок полезный, но не то что искал. Это скорее не перетаскивание, а замена элементов в массивах, отображаемых в разных, выделенных областях. Полноценное перетаскивание объекта - это перемещение его по экрану с размещением в произвольном месте. Хотелось бы увидеть реализацию данного варианта.
Коротко и по делу, спасибо! А как переносить итем не перетаскиванием, а по клику? Первым кликом выбираем элемент (элементы), вторым кликом по категории элементы переносятся в нее? Как переделать ваш пример под эту задачу?
Вводите дополнительное состояние, которое сигнализирует о том что выбран элемент, который нужно перенести. В зависимости от этого по-разному обрабатываете нажатие по категории. Соответственно, когда элемент выбран - нажатие по категории переносит в нее элемент.
а как сделать, чтобы итемы можно было сортировать как хочу, сейчас они просто по индексу сортируются
скажи пожалуйста, какие ты используешь расширение?
Для Webstorm только 2 - One dark theme и Material icons
Данный пример подойдет для Vue 2? Я так понимаю это нативный Drag and Drop без использования плагинов?
Да, так и есть. Но во vue 2 нет composition-api, но если вы посмотрите инструкцию по миграции, то сможете запросто переписать пример на options-api.
Подскажите пожалуйста, как IDEшка называется?. В видео не понятно. ВьюСиЛАй?
Ide - JetBrains WebStorm
А как дописать так, чтобы типа собираешь из одной зоны в другую правильный набор элементов,типа, например, буквы перетаскиваешь а в другой зоне проверяется, правильное ли ты слово собрал, и если правильно, то об этом сообщение, например, цвет на зелёный меняется?
Делаешь в модели зоны какой нибудь флаг, который говорит о том нужна ли этой зоне валидация, потом делаешь саму функцию валидации и computed свойство, в котором через функцию map собираешь массив состояния зон. В шаблоне из этого свойства ищешь элемент с id зоны, которая рендерится в данный момент и отображаешь ее состояние если нужно.
Хорошее видео, но сделай шрифт размером побольше, а то нихрена почти не видно)
Спасибо! Учту)
Хотя я специально прибавлял размер шрифта, но похоже надо будет прибавить ещё больше :)
@@user-bc2nc5lt5p не знаю в чем проблема, но что на 16, что на 24" все отлично видно
Круто, но как менять местами элементы, а не перетаскивать в другую категорию, все обыскал, но на vue 3, не могу найти.
1 Добавляем элементам (items) свойство сортировки
2 Делаем вычисляемый список в котором сортируем по этому полю и переключаем вывод на него
3 Есть событие dragover соответственно првязываем к div выводящему item обработчик этого события. В этом обработчике есть итем над котром несем, и в евенте есть координаты. сохраняем в стор.
4. при отпускании на основании координат и элемента над которым "несли" пересчитываем в массиве поле сортировки
Почему данные могут быть не реактивные? В консоль вывожу данные они изменяются, а на странице нет)
как называется тема на WebStorm?
One dark
А как сделать чтобы при перетаскивании блок не становился полупрозрачным?
задать background-color
you saved my life, thank you
что за setup()?
во вью есть data, props, computed, methods и тд
Это composition api - нововведение Vue3.
composition api не обязательно использовать можно далее писать на options api это дело вкуса или правил в той или иной команде.
@@volodymyrfursov5948 Оно банально удобнее. И меньше "магии". Я надеюсь, что разработчики таки рано или поздно перейдут на него и перестанут писать все эти дурацкие секции...
Где найти оформление WebStorm как у тебя?
Тема One dark, в маркете плагинов в настройках WebStorm
@@user-bc2nc5lt5p У меня произошло нечто страшное с текстом. И я не знаю что с этим делать... imgur.com/a/WUv
@@MickeyChoiTM скорее всего не та тема
Артём, а ты уже работаешь где-нибудь frontend разработчиком?
Официально - нет, но в целом бывают проекты частенько. Сейчас учусь в университете, поэтому не устраиваюсь официально.
@@user-bc2nc5lt5p а причем тут универ? Можно же параллельно
На полный рабочий день с учебой не устроишься.
@@user-bc2nc5lt5p можно спокойно устраиваться на половину раб дня. Сам так сделал (на vue 3 удаленно).
Молодец!:)
С Вуе2 пока опасно слезать .
Само собой, но и на Vue3 придется когда нибудь перейти, учитывая все его плюсы. Но даже так, если раньше я обожал Vue, то сейчас очень скептически отношусь к этому фреймворку т.к. он предоставляет очень смешанный опыт по реализации комплексных проектов с использованием typescript. Максимально неудобно совмещать .ts с .vue. + во Vue всегда была неприятная особенность в виде крайней непрозрачности. Во vue3 это конечно постарались исправить, но по большей части все ещё Vue - это магия. И хуки - хороший первый шаг. Конечно, возможно в итоге Vue превратится в React, посмотрим.
хера се если ты начинающий тогда я чо в зародыше еще
😄
делать ID равным 0 - фиговатенькая практика, лучше отвыкай от этого.
Обычно такая ситуация, когда id=0 может означать пустой, но инициализированный какой-то объект, т.е. не валидный.
Код прям так себе, 2 видео по запросу "vue 3 drag and drop" в 2 раза кароче, в 2 раза информативней, а главное -- учит хорошим манерам написания кода. Оставляю этот комментарий для того, чтобы люди, которые пришли смотреть, понимали, что лучше учиться у других)
Ссылка на прекрасное видео по этой же теме:
th-cam.com/video/-kZLD40d-tI/w-d-xo.html
А еще главнее - твое видео на английском....
В остальном - два видео ничем не отличаются, только скоростью написания кода. Если это видео поставить на x2 - получится то же самое.