effectAllowed и dropEffect это свойства для построения логики. Т.е. относительно типовые причины для перетаскивания: скопировать (т.е. во второй группе будет "похожий" объект), переместить (объект будет перенесен), создать символьную ссылку (один и тот же объект будет принадлежать обеим группам). Т.е. вы можете в соответствии с логикой приложения указать какая группа позволяет и с какой целью переносить объекты на себя, а с другой стороны в объекте указывать цель его переноса. И уже на уровне браузера будут "подсвечиваться" только те области куда можно перенести для заданной цели
Урок полезный, но не то что искал. Это скорее не перетаскивание, а замена элементов в массивах, отображаемых в разных, выделенных областях. Полноценное перетаскивание объекта - это перемещение его по экрану с размещением в произвольном месте. Хотелось бы увидеть реализацию данного варианта.
Спасибо за видосы! Круто, продолжай снимать) Подскажи а что за плагин стоит что бы так информацию смотреть по свойствам, вот когда ты н аводил на dropEffect
Привет! Классное видео, очень актуальное вдруг стало. Но есть вопросики) Как применять стили для элементов, когда только взял элемент, когда подвел к нужной области, менять стиль области? Добавил бы картинку сюда для примера, что-то не знаю как...
Привет, спасибо за отзыв! На 0:58 приведен список всех эвентов D&D API, соответственно с помощью них можно реализовать все что нужно. На определенных эвентах меняешь состояние компонента и в зависимости от этого рендеришь то что тебе нужно. В частности с помощью события dragover можно изменить состояние так, чтобы соответсвутюще подсветилась droppable зона.
Коротко и по делу, спасибо! А как переносить итем не перетаскиванием, а по клику? Первым кликом выбираем элемент (элементы), вторым кликом по категории элементы переносятся в нее? Как переделать ваш пример под эту задачу?
Вводите дополнительное состояние, которое сигнализирует о том что выбран элемент, который нужно перенести. В зависимости от этого по-разному обрабатываете нажатие по категории. Соответственно, когда элемент выбран - нажатие по категории переносит в нее элемент.
1 Добавляем элементам (items) свойство сортировки 2 Делаем вычисляемый список в котором сортируем по этому полю и переключаем вывод на него 3 Есть событие dragover соответственно првязываем к div выводящему item обработчик этого события. В этом обработчике есть итем над котром несем, и в евенте есть координаты. сохраняем в стор. 4. при отпускании на основании координат и элемента над которым "несли" пересчитываем в массиве поле сортировки
А как дописать так, чтобы типа собираешь из одной зоны в другую правильный набор элементов,типа, например, буквы перетаскиваешь а в другой зоне проверяется, правильное ли ты слово собрал, и если правильно, то об этом сообщение, например, цвет на зелёный меняется?
Делаешь в модели зоны какой нибудь флаг, который говорит о том нужна ли этой зоне валидация, потом делаешь саму функцию валидации и computed свойство, в котором через функцию map собираешь массив состояния зон. В шаблоне из этого свойства ищешь элемент с id зоны, которая рендерится в данный момент и отображаешь ее состояние если нужно.
@@volodymyrfursov5948 Оно банально удобнее. И меньше "магии". Я надеюсь, что разработчики таки рано или поздно перейдут на него и перестанут писать все эти дурацкие секции...
Само собой, но и на Vue3 придется когда нибудь перейти, учитывая все его плюсы. Но даже так, если раньше я обожал Vue, то сейчас очень скептически отношусь к этому фреймворку т.к. он предоставляет очень смешанный опыт по реализации комплексных проектов с использованием typescript. Максимально неудобно совмещать .ts с .vue. + во Vue всегда была неприятная особенность в виде крайней непрозрачности. Во vue3 это конечно постарались исправить, но по большей части все ещё Vue - это магия. И хуки - хороший первый шаг. Конечно, возможно в итоге Vue превратится в React, посмотрим.
делать ID равным 0 - фиговатенькая практика, лучше отвыкай от этого. Обычно такая ситуация, когда id=0 может означать пустой, но инициализированный какой-то объект, т.е. не валидный.
Код прям так себе, 2 видео по запросу "vue 3 drag and drop" в 2 раза кароче, в 2 раза информативней, а главное -- учит хорошим манерам написания кода. Оставляю этот комментарий для того, чтобы люди, которые пришли смотреть, понимали, что лучше учиться у других) Ссылка на прекрасное видео по этой же теме: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE--kZLD40d-tI.html
А еще главнее - твое видео на английском.... В остальном - два видео ничем не отличаются, только скоростью написания кода. Если это видео поставить на x2 - получится то же самое.
