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.
Добавить комментарий