Объект dataTransfer

Это объект, который содержит информацию, задействованную в операции перетаскивания. С объектом dataTransfer связаны несколько методов и свойств. Мы уже использовали setData() и getData() в примере из листинга 8.3. Именно эти методы, а также дополнительный метод clearData() отвечают за передаваемую информацию:

— setData(type, data). Используется для объявления передаваемых данных и их типа. Принимает данные обычных типов (таких, как text/ plain, text/html и text/uri-list), специальных типов (таких, как URL и Text) и даже персонализированных типов. Метод setData() необходимо отдельно вызывать для каждого типа данных, которые мы хотим отправить в ходе одной операции;

— getData(type). Возвращает отправленные элементом-источником данные указанного типа;

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

В функции dragged() в листинге 8.3 содержится короткий HTML-код, включающий в себя значение атрибута src элемента, на котором сработало событие dragstart. Мы сохраняем этот код в переменной code и отправляем ее целевому элементу посредством метода setData(). Поскольку отправляем текст, в качестве значения первого аргумента указан соответствующий тип, Text.

Можно было бы использовать в нашем примере более подходящий тип, например text/html или даже персонализированный тип, однако пока что многие браузеры поддерживают крайне ограниченный набор типов. Таким образом, тип Text делает наше приложение лучше совместимым с существующими браузерами, и примеры из этой главы можно тестировать без какой-либо дополнительной подготовки.

Чтобы побольше узнать о типах данных для операции перетаскивания, зайдите на наш веб-сайт и изучите ссылки для этой главы.

Когда в функции dropped() мы извлекаем переданные данные с помощью метода getData(), необходимо указывать, данные какого типа мы считываем. Смысл в том, что одновременно один элемент может отправить данные разных типов. Например, объект изображения может отправить само

Изображение, URL-адрес и текст с описанием. Для отправки и получения данных каждого из типов применяются отдельные методы setData() и getData() с указанием требуемого типа.

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

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

— types. Возвращает массив, содержащий типы, которые были отправлены в событии dragstart (нашим кодом или самим браузером). Можно сохранить этот массив в переменной (list=dataTransfer. types), а затем считать его содержимое в цикле;

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

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

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