драг энд дроп что это
Использование Drag&Drop в HTML 5
Долгое время для создания Drag&Drop функционала использовались JavaScript-функции, однако браузеры не всегда корректно могли отображать результат. В HTML 5 есть способ грамотной поддержки Drag&Drop, с небольшим применением JavaScript. В этой статье подробно разобран наглядный пример применения Drag&Drop в HTML 5.
Поддержка браузерами
На сегодняшний день функция Drag&Drop в HTML 5 корректно обрабатывается всеми современными настольными браузерами, (частично даже IE 5.5!), однако мобильные такую возможность не поддерживают. Подробнее данные в таблице caniuse.com.
События Drag&Drop
Ниже перечислены события Drag&Drop, с помощью которых можно контролировать процесс перетаскивания:
Объект dataTransfer
Здесь происходит сам процесс перетаскивания. Наиболее важные параметры:
Пример Drag&Drop
Теперь рассмотрим наглядный простой пример использования Drag&Drop, где два маленьких синих div’а можно переместить в большой красный, а также вернуть их на исходное место.
Начало перетаскивания объекта
В первую очередь необходимо создать HTML-разметку блоков, добавив атрибут draggable:
Затем определить JavaScript-функцию начала процесса:
В первой строке задан возможный тип перетаскивания — move, во второй — устанавливаются данные процесса — тип (Text) и ID. В третьей строке setDragImage определяет положение курсора, в данном случае в середине квадрата 200х200 пикселей.
Завершение перетаскивания объекта
Потребуется задать три события: dragEnter, dragOver и drop:
Кроме того, требуется добавить JavaScript-функции для завершения процесса перетаскивания — определить, что должно случиться с элементами, когда курсор будет отпущен:
В данном простом примере заданы только основные действия, но можно добавить другие — изменение цвета фона, добавления текста и т.д. Далее — заключительный этап. Здесь задаются действия окончания перетаскивания:
Как видно из примера, синие блоки после перетаскивания можно вернуть на исходное место. К счастью, сделать это очень просто. Все функции объявлены, осталось добавить следующий код:
Заключение
С помощью JavaScript-библиотек создано большое количество решений для Drag&Drop, и зачастую они проще в использовании, чем описанный пример. Однако скорее всего в будущем все чаще будет использоваться связка HTML5 & JavaScript.
Drag-and-drop
Drag-and-drop (в переводе с английского означает буквально тащи-и-бросай; Бери-и-Брось) — способ оперирования элементами интерфейса в интерфейсах пользователя (как графическим, так и текстовым, где элементы GUI реализованы при помощи псевдографики) при помощи манипулятора «мышь» или сенсорного экрана.
Способ реализуется путём «захвата» (нажатием и удержанием главной (первой, чаще левой) кнопки мыши) отображаемого на экране компьютера объекта, программно доступного для подобной операции, и перемещении его в другое место (для изменения расположения) либо «бросания» его на другой элемент (для вызова соответствующего, предусмотренного программой, действия). По отношению к окнам (также способным к перемещению подобным способом) данный термин обычно не употребляется.
Базовыми действиями и самыми простыми примерами drag-and-drop действий являются: перемещение объекта, перемещение объекта в из панели в панель, хотя в современных операционных системах drag-and-drop получил широкое применение и является одним из главных способов взаимодействия с компьютером в графическом интерфейсе пользователя.
Объектами для перемещения могут быть следующие элементы интерфейса: значки (иконки) Рабочего стола, плавающие панели инструментов, ярлыки программ в Панели задач (начиная с Win XP), элементы TreeView, текстовая строка, ячейка DataGridView., также элементы OLE. Перемещаться объекты могут как в пределах некоторой определённой области, в пределах одного окна, между панелями одного окна, так и между разными окнами.
Событие перетаскивания должно инициироваться каким-либо действием пользователя. Чаще всего этим действием является нажатие левой кнопки мыши на элементе (событие это называется MouseDown), который может быть перемещен в своем контейнере. Некоторые компоненты обладают собственными событиями начала drag-n-drop — например, TreeView имеет событие ItemDrag.
Drag-and-drop
Из Википедии — свободной энциклопедии
Способ реализуется путём «захвата» (нажатием и удержанием главной (первой, чаще левой) кнопки мыши) отображаемого на экране компьютера объекта, программно доступного для подобной операции, и перемещении его в другое место (для изменения расположения) либо «бросания» его на другой элемент (для вызова соответствующего, предусмотренного программой, действия). По отношению к окнам (также способным к перемещению подобным способом) данный термин обычно не употребляется.
Базовыми действиями и самыми простыми примерами drag-and-drop действий являются: перемещение объекта, перемещение объекта из панели в панель, хотя в современных операционных системах drag-and-drop получил широкое применение и является одним из главных способов взаимодействия с компьютером в графическом интерфейсе пользователя.
Объектами для перемещения могут быть следующие элементы интерфейса: значки (иконки) Рабочего стола, плавающие панели инструментов, ярлыки программ в Панели задач (начиная с Win XP), элементы TreeView, текстовая строка, ячейка DataGridView., также элементы OLE. Перемещаться объекты могут как в пределах некоторой определённой области, в пределах одного окна, между панелями одного окна, так и между разными окнами.
Событие перетаскивания должно инициироваться каким-либо действием пользователя. Чаще всего этим действием является нажатие левой кнопки мыши на элементе (событие это называется MouseDown), который может быть перемещен в своем контейнере. Некоторые компоненты обладают собственными событиями начала drag-n-drop — например, TreeView имеет событие ItemDrag.
Форум
Discord чат
Drag and drop
В свое время приходилось реализовывать кучу drag and drop’ов под самым разным соусом.
Эта статья представляет собой учебник-выжимку о том, как организовать drag’n’drop в javascript, начиная от основ и заканчивая готовым фреймворком.
Кроме того, почти все javascript-библиотеки реализуют drag and drop так, как написано (в статье дано несколько разных вариантов, не факт что ваш фреймворк использует лучший). Зная, что и как, вы сможете поправить и адаптировать существующую библиотеку под себя.
Drag’n’drop в свое время был замечательным открытием в области интерфейсов, которое позволило упростить большое количество операций.
Перенос мышкой может заменить целую последовательность кликов. И, самое главное, он упрощает внешний вид интерфейса: функции, реализуемые через drag’n’drop, в ином случае потребовали бы дополнительных полей, виджетов и т.п.
Основная логика drag and drop
Координаты и кнопка мыши
При обработке событий, связанных с мышью, нужен кроссбраузерный способ получения координат курсора из события в обработчике. Кроме того, необходимо знать нажатую кнопку мыши.
Кроссбраузерно ставить эти свойства на объект будет функция fixEvent (по статье свойства объекта событие):
В этом коде e.which проходит кросс-браузерную обработку, чтобы корректно отражать нажатую кнопку мыши. Вы можете подробно прочитать об этом в статье Свойства объекта событие.
Координата X:
Координата Y:
Отслеживаем клик на объекте переноса
Чтобы начать перенос элемента, мы должны отловить нажатие кнопки мыши на объекте.
Пока этот обработчик будет запоминать объект в глобальной переменной dragObject
При нажатии на элемент он запоминается и выделяется.
Выделение(запоминание) действует на все время, когда нажата кнопка мыши, в том числе при перемещении курсора.
Иногда бывает, что объектов, которые могут быть перенесены, много. Например, это ячейка таблицы или длинный список, или дерево статей с массой узлов.
Тогда время инициализации можно сильно сократить, если назначать обработчик onmousedown не на каждый объект переноса, а на контейнер. И уже в самом обработчике по event.target определять, где произошел клик.
Drag and drop контроллер
Перед дальнейшим развитием проведем реорганизацию кода.
На это натыкались многие писатели drag’n’drop приложений. Мы же будем изначально закладывать производительность во все критические участки кода.
Визуальное перемещение элемента
Вот так: 
Начало движения: сохранение позиции курсора в элементе
Посетитель обычно кликает не в левый-верхний угол, а куда угодно на элементе.
Поэтому чтобы элемент не прилипал к курсору верхним-левым углом, к позиции элемента необходимо добавить смещение мыши на момент клика.
Отсюда легко получаем смещение курсора мыши:
Это изначальное смещение мы запоминаем при клике, прибавляем его при начале движения и сохраняем в дальнейшем.
Тогда позиция элемента относительно курсора мыши будет все время одной и той же.
Кроме того, при начале переноса останавливается выделение и перенос текста браузером:
Если этого не сделать, то движение курсора мыши при нажатой кнопке будет не только перемещать элемент, но и, например, выделять текст под собой (стандартная функция выделения текста на странице).
Например, переносимый объект очень сложен, и его передвижение целиком тормозит браузер и выглядит громоздко/неэстетично.
Сам элемент при этом скрывается display/visibility=’none’ или просто остается на месте, в зависимости от логики интерфейса.
Переносимый клон инициализуется в начале переноса и уничтожается в конце.
Опускаем элемент
Существенная техническая проблема заключается в том, что событие mouseup сработает не на корзине, а на переносимом элементе, т.к. курсор мыши находится именно над ним.
Определить, что иконка опущена на корзину, можно, сравнив координаты корзины с коорданатами мыши на момент события.
Перенеси меня в корзину
В коде контроллера: функции, тело которых заменено на «. «, остались без изменения с прошлого примера.
Основных изменений всего три.
Измененный обработчик mouseUp теперь проходит в цикле по возможным таким объектам и проверяет, не находится ли курсор внутри ограничивающего объект прямоугольника.
Если да, то демка всего лишь выводит сообщение. Реально приложение, конечно, может сделать более сложные действия.
Индикация переноса над объектом
В удобном интерфейсе мы, скорее всего, захотим как-то показывать посетителю, над каким объектом он сейчас находится.
Однако, так как mouseMove выполняется при каждом передвижении мыши, его надо максимально оптимизировать.
Пронеси меня над корзиной
Код уже стал довольно длинным, поэтому в листинге ниже повторяющиеся фрагменты заменены на троеточие «. «
Отделяем начало drag’n’drop от простого клика
Как отделить? Очень просто:
В коде этой демки стоит расстояние не 2, а 25 пикселей, в целях наглядности происходящего.
До перемещения курсора на 25 пикселей вверх или вниз перенос не начнется.
Оптимизация
Бывает, что возможных акцепторов очень много. Тогда код, кеширующий прямоугольники при начале переноса, будет тормозить.
Принципиальных решений здесь два.
Смена способа вычисления координат
document.elementFromPoint(x,y)
Этот малоизвестный метод работает во всех браузерах и возвращает элемент по координатам на странице.
На время вызова elementFromPoint необходимо спрятать переносимый элемент, чтобы он не закрывал акцептора.
Псевдокод будет выглядеть так:
Вычисление по известным размерам
Например, мы переносим объект в список акцепторов:
И мы знаем, что каждый элемент имеет фиксированную высоту и отступы:
В таком случае, можно вычислить номер LI, разделив общую высоту контейнера на высоту акцептора.
Конечно, такая оптимизация возможна не всегда и зависит от конкретной задачи.
Убрать элемент из-под курсора
Да, получится не так красиво, но это может быть единственным выходом.
Упростить объект переноса
Можно переносить не сам объект, а его «аватар», схематическое изображение.
Это может быть полезно:
Рефакторинг
Код dragMaster ‘а на текущий момент сочетает весь функционал по отслеживанию переноса, отображению и опусканию на акцептор.
Целесообразно его разделить на три компоненты: переносимые объекты, цели переноса (акцепторы) и менеджер, который следит, что куда переносится.
DragObject
В другой реализации может показывать перенос как-то по-другому, например создавать «переносимый клон» объекта.
onDragMove(x, y) Вызывается при переносе объекта в координаты (x,y). Отображает перенос. onDragFail() Обрабатывает неудачный перенос. В текущей реализации возвращает объект на старые координаты.
DropTarget
Как показано дальше, поддерживаются вложенные DropTarget : объект будет положен туда, куда следует, вне зависимости от степени вложенности.
dragMaster
Итоговый Drag’n’Drop фреймворк
Скачать пакет из итогового фреймворка и демок можно здесь.
Мышь: Drag’n’Drop
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Более новая информация по этой теме находится на странице https://learn.javascript.ru/mouse-drag-and-drop.
Drag’n’Drop – это возможность захватить мышью элемент и перенести его. В своё время это было замечательным открытием в области интерфейсов, которое позволило упростить большое количество операций.
Перенос мышкой может заменить целую последовательность кликов. И, самое главное, он упрощает внешний вид интерфейса: функции, реализуемые через Drag’n’Drop, в ином случае потребовали бы дополнительных полей, виджетов и т.п.
Отличия от HTML5 Drag’n’Drop
В современном стандарте HTML5 есть поддержка Drag’n’Drop при помощи специальных событий.
Эти события поддерживаются всеми современными браузерами, и у них есть свои интересные особенности, например, можно перетащить файл в браузер, так что JS получит доступ к его содержимому. Они заслуживают отдельного рассмотрения.
Но в плане именно Drag’n’Drop у них есть существенные ограничения. Например, нельзя организовать перенос «только по горизонтали» или «только по вертикали». Также нельзя ограничить перенос внутри заданной зоны. Есть и другие интерфейсные задачи, которые такими встроенными событиями нереализуемы.
Поэтому здесь мы будем рассматривать Drag’n’Drop при помощи событий мыши.
Рассматриваемые приёмы, вообще говоря, применяются не только в Drag’n’Drop, но и для любых интерфейсных взаимодействий вида «захватить – потянуть – отпустить».
Алгоритм Drag’n’Drop
Основной алгоритм Drag’n’Drop выглядит так:
В следующем примере эти шаги реализованы для переноса мяча:
Если запустить этот код, то мы заметим нечто странное. При начале переноса мяч «раздваивается» и переносится не сам мяч, а его «клон».
Это можно увидеть в действии внутри ифрейма:
Попробуйте перенести мяч мышкой и вы увидите описанное, довольно-таки странное, поведение.
Это потому, что браузер имеет свой собственный Drag’n’Drop, который автоматически запускается и вступает в конфликт с нашим. Это происходит именно для картинок и некоторых других элементов.
Его нужно отключить:
Теперь всё будет в порядке.
В действии (внутри ифрейма):
Однако, на самом деле мышь во время переноса не всегда над мячом.
Вспомним, событие mousemove возникает хоть и часто, но не для каждого пикселя. Быстрое движение курсора вызовет mousemove уже не над мячом, а, например, в дальнем конце страницы.
Правильное позиционирование
В примерах выше мяч позиционируется в центре под курсором мыши:
Но не идеально. В частности, в самом начале переноса, особенно если мячик «взят» за край – он резко «прыгает» центром под курсор мыши.
Для правильного переноса необходимо, чтобы изначальный сдвиг курсора относительно элемента сохранялся.
Где захватили, за ту «часть элемента» и переносим:
Получить значения shiftX/shiftY легко: достаточно вычесть из координат курсора pageX/pageY левую-верхнюю границу мячика, полученную при помощи функции getCoords.
При Drag’n’Drop мы везде используем координаты относительно документа, так как они подходят в большем количестве ситуаций.
Далее при переносе мяча мы располагаем его left/top с учётом сдвига, то есть вот так: