В связи с расширением роли интерфейсов drag-and-drop их популярность также значительно возросла. В настоящее время все больше людей заинтересованы в обучении разработке и создании пользовательского программного обеспечения без изучения программирования, поэтому за последние несколько лет появилось множество надежных интерфейсов drag-and-drop.
Тем не менее, существует много общих проблем, связанных с интерфейсами drag-and-drop и их надежностью в создании эффективного пользовательского программного обеспечения. В этой статье вы узнаете все о платформах drag-and-drop и о том, как они могут помочь вам создать широкий спектр пользовательского программного обеспечения, включая веб-сайты, веб-приложения, мобильные приложения и базы данных.
Давайте сначала изучим основы drag-and-drop, прежде чем переходить к этим вопросам.
Что такое drag-and-drop?
Графический интерфейс пользователя (GUI) — разновидность пользовательского интерфейса, элементы которого представлены в виде графических изображений, также называется графической оболочкой управления. Аудиовизуальные подсказки часто используются в графических интерфейсах для облегчения пользовательского опыта на уровне визуализированной информации. Примерами графического интерфейса являются иконки программ на рабочем столе, возможность переставлять виджеты на телефоне и возможность соединить два файла вместе. Эти визуальные подсказки позволяют вам взаимодействовать с компьютером для достижения своих целей не написав ни строчки кода.
Обзор на Voopoo DRAG S: о плюсах, минусах и затопленных коннекторах
Drag-and-drop: способ оперирования элементами интерфейса пользователя
Проще всего что-то взять и положить, чем писать, что нужно взять и куда положить. Конечно без мышки, или подобного ей устройства, ничего не выберешь и ничего не укажешь, но даже в текущем положении вещей использование идеи «drag and drop» очень естественно и комфортно.
Область применения идеи — далеко не только интернет-магазины, электронные библиотеки, поисковые или информационные системы, а и прикладная сфера. Идея очень даже применима в разработке сайтов и их элементов, создаваемых и сопровождаемых интерактивно, без участия программиста.
Описание идеи
Выбрать, переместить и положить — идея естественная и удобная. Просто удивительно, что она не родилась, когда мышка стала незаменимым аксессуаром компьютера.
Самый очевидный пример — выбор товара в интернет-магазине. Взять мышкой нужный товар и перетащить его в корзину для покупок — просто, естественно и удобно. Загрузка файлов: взять документ за пределами окна браузера и положить его на элемент страницы, инициировав тем самым передачу документа на сервер — также практичная идея.
Для разработчика идея «drag and drop» — это манипулирование элементами страницы без ручного пересчета координат и размеров тегов, возможность выбора нескольких элементов и выравнивания их, а также перемещения сторон блочных тегов.
Обзор VOOPOO Drag S POD mod kit — Новый хит! | Thanks Sourcemore
HTML и CSS — отличные языки описания тегов и стилей их оформления, но когда разработчик имеет возможность интерактивно манипулировать элементами страницы без ручного пересчета координат и размеров, это делает работу более комфортной и эффективной.
Простой перенос файлов
«Drag and drop»: перевод с английского на русский буквально звучит «тащи и бросай». На практике это звучит и действует лучше: выбрал, перенес и отпустил — просто и естественно.
Реализовать на странице передачу файлов на страницу, на сервер или для иного использования очень просто.
В данном примере мышкой было выбрано несколько файлов на рабочем столе (левый рисунок). На выделении была нажата левая кнопка мышки и выбранное «поехало» в корзинку. Браузер сам показал, как это происходит, написал подсказку «копирование» и вокруг создал контуры перемещаемых файлов.
Когда мышка оказалась над корзинкой, посетитель отпустил левую кнопку мышки, событие «тащи и бросай» состоялось и на странице сайта (нижний рисунок) JavaScript-код смог получить и обработать все файлы, которые посетитель предоставил странице (сайту).
Описание реализации
Код, который выполняет эту процедуру, очень прост. Его повторить в любых вариантах использования может даже начинающий разработчик.
Здесь интерфейс пользователя представлен двумя тегами: scPlaceFile (это сама корзинка, куда нужно положить файлы) и scPlaceFiles (это результат обработки файлов, в данном случае их список).
Логика работы страницы такова. При загрузке страницы в браузере в корзинке назначается обработчик события «ondrop» — положить, остальные события блокируются и не используются.
Страница работает в штатном режиме, но как только посетитель выберет файл (файлы) и перетащит их на картинку корзинки, то есть на тег scPlaceFile, будет запущена обработка события «файлы приехали».
Данный обработчик просто выводит список файлов. Их количество находится в event.dataTransfer.files.length, а информация о каждом файле в event.dataTransfer.files[i].name. Что делать с полученными данными, определяет разработчик, в данном случае просто формируется список полученных файлов.
После обработки событие блокируется и не распространяется. Это необходимо, чтобы браузер не занимался самодеятельностью и не вмешивался в процесс обработки полученной информации.
DnD и внешние данные
Загрузка изображений на сервер в «drag and drop» — обычная практика применения этой технологии. Как правило, разработчик создает форму для загрузки файла (1), которая работает обычным образом (2). Посетитель может в обычном режиме выбирать файлы и загружать их.
Однако если посетитель на определенное место формы сделает «drag and drop», то поле имени файла (файлов) заполнится автоматически.
Это хорошее решение. Допустить, что на компьютере нет мышки, конечно, очень трудно. Но лучше разработать интерфейс пользователя в обычном варианте и в DnD-реализации.
DnD и внутренние данные
Забота об интересах посетителя всегда важна, но проблемы разработчика также имеют значение. Реализовать «drag and drop» можно не только стандартными средствами, но и посредством обработки событий мышки на элементах страницы.
Задача расчета значений координат тегов и их размеров возникает постоянно. Ручной расчет — хорошая практика, но интерактивный вариант более удобен. Все теги всегда имеют прямоугольную форму и, отслеживая «мышиные» события на сторонах элементов, можно создать возможность автоматического перемещения элементов в нужное место страницы, либо изменения их.
Обработка события нажатия кнопки мышки — запоминание координат места клика, например, одной из сторон элемента. Перемещение мышки — сторона перемещается в нужном направлении. Отпускание кнопки мышки — сторона останавливается, а ее координаты изменяются. Так можно изменить положение элемента или его размер.
Формально это не «drag and drop», но эффект аналогичный и практичный. Сделав универсальные обработчики для любого элемента страницы, можно получить хороший интерактивный результат, ускорить разработку и упростить код.
Визуальное и ручное программирование
Туториал. Список задач с drag drop на ванильном JavaScript. Дословный перевод с английского — «потяни и брось» — отражает суть эффекта, это хорошо знакомое любому пользователю перетаскивание элементов интерфейса. Drag drop на примере сортировки. Для этого создадим интерактивный список задач.
HTML Drag and Drop API
В стандарте HTML5 есть API, который позволяет реализовать эффект drag font-family: «Tahoma», sans-serif; font-size: 18px; line-height: 25px; color: #164a44; background-color: #b2d9d0; >.tasks__title < margin: 50px 0 20px 0; text-align: center; text-transform: uppercase; >.tasks__list < margin: 0; padding: 0; list-style: none; >.tasks__item < transition: background-color 0.5s; margin-bottom: 10px; padding: 5px; text-align: center; border: 2px dashed #b2d9d0; border-radius: 10px; cursor: move; background-color: #dff2ef; transition: background-color 0.5s; >.tasks__item:last-child < margin-bottom: 0; >.selected
Здесь стоит обратить внимание на тип курсора, который мы указали — move . Все элементы списка смогут перемещаться, а с помощью курсора move мы подсказываем пользователю, что есть такая возможность.
Также мы задали стилизацию для класса selected , который чуть позже будем добавлять программно при взаимодействии с элементом
Реализация drag const taskElements = tasksListElement.querySelectorAll(`.tasks__item`); // Перебираем все элементы списка и присваиваем нужное значение for (const task of taskElements)
Уже сейчас перетаскивание доступно для элементов, но пока это выражается только в появлении фантомной копии. Своего положения элементы не меняют, добавим перемещение чуть позже.
Шаг 2. Добавим реакцию на начало и конец перетаскивания
Будем отслеживать события dragstart и dragend на всём списке. В начале перетаскивания будем добавлять класс selected элементу списка, на котором было вызвано событие. После окончания перетаскивания будем удалять этот класс.
tasksListElement.addEventListener(`dragstart`, (evt) => < evt.target.classList.add(`selected`); >) tasksListElement.addEventListener(`dragend`, (evt) => < evt.target.classList.remove(`selected`); >);