Привет, меня зовут Лукьянов Артём и я веб разработчик. Начал изучать веб в начале зимы 2019 года. Также я немного дизайнер. :) На этом канале я по возможности буду делиться с вами своим опытом и просто записывать полезные видео. Будут вопросы - пишите!
Хуже объяснений я не видел! Такое впечатление что нужно вложиться ровно в указанное время а не внятно объяснить. Как на эстафете прямо: максимум скорости - минимум доходчивости. Даёшь следующий ролик за 3 сек!!! Кто быстрее!)))
Урок полезный, но не то что искал. Это скорее не перетаскивание, а замена элементов в массивах, отображаемых в разных, выделенных областях. Полноценное перетаскивание объекта - это перемещение его по экрану с размещением в произвольном месте. Хотелось бы увидеть реализацию данного варианта.
effectAllowed и dropEffect это свойства для построения логики. Т.е. относительно типовые причины для перетаскивания: скопировать (т.е. во второй группе будет "похожий" объект), переместить (объект будет перенесен), создать символьную ссылку (один и тот же объект будет принадлежать обеим группам). Т.е. вы можете в соответствии с логикой приложения указать какая группа позволяет и с какой целью переносить объекты на себя, а с другой стороны в объекте указывать цель его переноса. И уже на уровне браузера будут "подсвечиваться" только те области куда можно перенести для заданной цели
Ужасное видео. Зачем делать что-то на скорость, если люди смотрят для того, чтобы понять? ну возьми лучше и сними три видео, но зато понятные, чем одно, где все сжато, увеличена скорость и нихрена непонятно!
А чё помедленнее нельзя было сделать? Ничё, что новички могут наткнуться на это видео и из-за рассинхрона звука с картинкой может ввести в заблуждение? Дак ещё и так быстро идёт ролик....вообще ппц какой-то
1 Добавляем элементам (items) свойство сортировки 2 Делаем вычисляемый список в котором сортируем по этому полю и переключаем вывод на него 3 Есть событие dragover соответственно првязываем к div выводящему item обработчик этого события. В этом обработчике есть итем над котром несем, и в евенте есть координаты. сохраняем в стор. 4. при отпускании на основании координат и элемента над которым "несли" пересчитываем в массиве поле сортировки
Удаление/выполнение через indexOf() работает в данном случае криво. По крайней мере у меня. При изначальном добавлении задач всё ок, id в массиве совпадают с индексом элемента в массиве (добавили первый элемент, у меня id: 0 и он 0 элемент и т.д.), добавим так три элемента, получим id:0 с task[0], id:1 в массиве [1], id:2 в массиве [2]. Удаляем [1]. Теперь снова добавляем новый таск, длина массива сейчас 2, то есть у нового таска будет id: 2 в массиве [2]. Смекаете? Теперь у нас два элемента с одинаковыми id, indexOf вернет первый найденный элемент, это всегда будет тот второй, который добавляли изначально, даже если вы жмете кнопку на вновь добавленном и удаляться у вас будет совсем не то что нужно. Для понимания, на последнем из описанных этапов массив с тасками будет выглядеть так: 0: {id: 0, title: '0', complete: false} 1: {id: 2, title: '2', complete: false} 2: {id: 2, title: '3', complete: false} Соответственно если нажать на 2 элемент, то удалится первый. Решил так (всё гораздо проще получается): deleteTask(index) { // индекс тот что назначается в компоненте List через map, он же там key=index const { allTasks } = this.state; const updatedAllTasks = allTasks.slice(); // делаем не глубокое копирование updatedAllTasks.splice(index, 1); this.setState({ allTasks: updatedAllTasks }); } Выполнение таска тоже по другому сделал, вообще я хоть и абсолютный новичок, но мне не понравилось явное присвоение done = true. В таком случае нельзя вернуть обратно, а если пользователь случайно нажал или что-то не доделал, потом вспомнил и хочет сделать задачу снова активной? Тут нужен аналог toggle из ванилы js. Реализовал так: completeTask(index) { const { allTasks } = this.state; let updatedAllTasks = allTasks.map((task, id) => { // index всё так же передаём из map в компоненте List if (index === id) { task.complete = !task.complete; } return task; }); this.setState({ allTasks: updatedAllTasks }); } Пока получается что присвоение id объекту (таску) вообще не нужно. Это очень подозрительно, скорее всего неправильно, но пока других вариантов не вижу.
Спасибо за развернутный комментарий. Канал в целом не мертв, он всегда был в примерно таком формате, т.е. может выйти случайное видео раз в год. Не могу заниматься им в силу дел. А так, видео целом уже аутдейтнутое, да и старое достаточно, с того времени я уже вырос в разы, да и не фронтенд уже.. )
Код прям так себе, 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 - получится то же самое.
