API Drag and Drop (перетаскивание) — краткий справочник

API Drag and Drop (перетаскивание) — краткий справочник.

API Drag and Drop (Перетаскивание) предоставляет специальные события, методы и свойства, помогающие строить приложения с поддержкой перетаскивания элементов.

В этом API появилось семь новых событий:

— dragstart. Срабатывает на источнике, когда операция перетаскивания начинается;

— drag. Срабатывает на источнике во время выполнения операции перетаскивания;

— dragend. Срабатывает на источнике, когда операция перетаскивания завершается: либо перетаскиваемый элемент успешно попадает на зону приема, либо перетаскивание отменяется;

— dragenter. Срабатывает на целевом элементе, когда указатель мыши с перетаскиваемым элементом оказывается над ним. Данное событие всегда необходимо отменять методом preventDefault();

— dragover. Срабатывает на целевом элементе, когда указатель мыши с перетаскиваемым элементом находится над ним. Данное событие всегда необходимо отменять методом preventDefault();

— drop. Срабатывает на целевом элементе, когда пользователь отпускает на нем перетаскиваемый элемент. Данное событие всегда необходимо отменять методом preventDefault();

— dragleave. Срабатывает на целевом элементе, когда указатель мыши с перетаскиваемым элементом покидает данную зону.

Методы

Далее приведен список наиболее важных методов, появившихся в данном API:

— setData(type, data). Применяется для подготовки данных, которые будут отправлены при срабатывании события dragstart. В качестве атрибута type можно передавать название любого обычного типа данных (например, text/plain или text/html) или персонализированного типа данных;

— getData(type). Возвращает данные указанного типа. Используется после того, как срабатывает событие drop;

— clearData(type). Удаляет данные указанного типа;

— setDragImage(element, x, y). Заменяет эскиз по умолчанию, создаваемый браузером, указанным изображением, а также устанавливает его позицию относительно указателя мыши.

Свойства

У объекта dataTransfer, в котором содержатся данные, передаваемые во время операции перетаскивания, также есть несколько полезных свойств:

— types. Возвращает массив, содержащий все типы, определенные в событии dragstart;

— files. Возвращает массив с информацией о перетаскиваемых файлах;

— dropEffect. Возвращает тип выбранной в данный момент операции. Его также можно использовать для смены выбранной операции. Возможные значения — none, copy, link и move;

— effectAllowed. Возвращает допустимые типы операций. Также с помощью него можно менять список допустимых операций. Возможные значения — none, copy, copyLink, copyMove, link, linkMove, move, all и uninitialized.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *