Книга: JavaScript. Подробное руководство, 6-е издание
DataTransfer
DataTransfer
передача данных в операциях буксировки мышью
Когда пользователь выполняет операцию буксировки мышью (drag-and-drop), в источнике или в приемнике (или в обоих сразу, если оба они находятся в окне броузера) возбуждается целая последовательность событий. Вместе с этими событиями передается объект события, имеющий свойство dataTransfer
(см. Event
), ссылающееся на объект DataTransfer
. Объект DataTransfer
занимает центральное место в любой операции буксировки: источник сохраняет в нем передаваемые данные, а приемник извлекает из него переданные данные. Кроме того, объект DataTransfer
обеспечивает возможность добиться договоренности между источником и приемником о том, должны ли буксируемые данные копироваться, перемещаться или в приемнике должна быть установлена лишь ссылка на них.
Описываемый здесь API был разработан в корпорации Microsoft для использования в IE и реализован, по крайней мере частично, в других броузерах. Спецификация HTML5 стандартизует базовый API, реализованный в IE. Когда эта книга была уже передана в печать, в стандарт HTML5 было добавлено определение новой версии API, в которой предусмотрено свойство items
, являющееся объектом, подобным массиву, хранящему объекты DataTransferltem
. Это достаточно привлекательный и разумный API, но, поскольку он пока еще не реализован в броузерах, он здесь не рассматривается. Вместо этого в данной статье описываются возможности, которые можно использовать (почти) во всех текущих броузерах. Подробное обсуждение этого замысловатого API представлено в разделе 17.7.
Свойства
string dropEffect
Это свойство определяет тип передачи данных, представленных этим объектом. Свойство должно иметь одно из значений: «попе», «сору», «move» или «link». Как правило, объект-приемник устанавливает это свойство в обработчике события «dragenter» или «dragover». Значение этого свойства может также зависеть от клавиш модификаторов, удерживаемых пользователем в процессе буксировки, но это во многом зависит от платформы,
string effectAllowed
Это свойство определяет допустимую комбинацию операций перемещения из числа: копирование, перемещение и создание ссылки. Это свойство обычно устанавливается источником в ответ на событие «dragstart». Допустимыми значениями являются: «попе» (ни одна), «сору» (копирование), «copyLink» (копирование и создание ссылки), «copyMove» (копирование и перемещение), «link» (создание ссылки), «linkMove» (создание ссылки и перемещение), «move» (перемещение) и «all» (все). (Обратите внимание, что в мнемониках, определяющих две операции, названия операций следуют в алфавитном порядке.)
readonly File[] files
Если перемещаемые данные являются одним или более файлами, это свойство будет ссылаться на массив или на объект, подобный массиву, содержащий объекты File
,
readonly string[] types
Это объект, подобный массиву, содержащий строки, которые определяют MIME-типы данных, сохраняемых в объекте DataTransfer
(устанавливается методом setData(),
если источник располагается в броузере, или каким-либо другим механизмом, если источник находится за пределами броузера). Объект, подобный массиву, хранящий типы, должен иметь метод contains()
для проверки присутствия определенной строки. Однако некоторые броузеры передают в этом свойстве истинный массив, и в этом случае для проверки можно использовать метод indexOf().
Методы
void addElement(Element element)
Сообщает броузеру элемент element, который можно использовать для воспроизведения визуального эффекта, который будет наблюдать пользователь во время буксировки. Обычно этот метод вызывается буксируемым источником, но он может быть реализован или иметь хоть какой-нибудь эффект не во всех броузерах,
void clearData([string format])
Удаляет все данные в формате format, которые были добавлены методом setData()
.
string getData(string format)
Возвращает отбуксированные данные в формате format. Если в аргументе format передано значение «text» (без учета регистра символов), возвращаются данные в формате «text/рlаіп». А если передано значение «url» (без учета регистра символов), возвращаются данные в формате «text/uri-list». Этот метод вызывается приемником в ответ на событие «drop» в конце операции буксировки.
void setData(string format, string data)
Принимает данные data
для передачи и МІМЕ-тип этих данных в аргументе format. Источник вызывает этот метод в ответ на событие «dragstart» в начале операции буксировки. Он не может вызываться из какого-либо другого обработчика событий. Если источник способен представить данные более чем в одном формате, он может вызвать этот метод несколько раз, чтобы определить значения для каждого поддерживаемого формата,
void setDragImage(Element image, long x, long y)
Определяет изображение image
(обычно элемент <img>
), которое должно отображаться как визуальное представление буксируемых данных. Аргументы х и у определяют смещение указателя мыши относительно изображения. Этот метод может вызываться только буксируемым источником, в ответ на событие «dragstart».
- ApplicationCache
- ArrayBuffer
- ArrayBufferView
- Attr
- Audio
- BeforeUnloadEvent
- Blob
- BlobBuilder
- Button
- Canvas
- BlobBuilder
- Button
- Canvas
- CanvasGradient
- CanvasPattern
- CanvasRenderingContext2D
- ClientRect
- CloseEvent
- Comment
- Console
- ConsoleCommandLine
- CSS2Properties
- CSSRule
- CSSStyleDeclaration
- CSSStyleSheet
- DataTransfer
- DataView
- Document
- DocumentFragment
- DocumentType
- DOMException
- DOMImplementation
- DOMSettableTokenList
- DOMTokenList
- Element
- ErrorEvent
- Event
- EventSource
- EventTarget
- FieldSet
- File
- FileError
- FileReader
- FileReaderSync
- Form
- FormControl
- Form Data
- FormValidity
- Geocoordinates
- Geolocation
- GeolocationError
- Geoposition
- HashChangeEvent
- History
- HTMLCollection
- HTMLDocument
- HTMLEIement
- HTMLFormControlsCollection
- HTMLOptionsCollection
- IFrame
- Image
- ImageData
- Input
- jQuery jQuery 1.4
- KeyEvent
- Label
- Link
- Location
- MediaElement
- MediaError
- MessageChannel
- MessageEvent
- MessagePort
- Meter
- MouseEvent
- Navigator
- Node
- NodeList
- Option
- Output
- PageTransitionEvent
- PopStateEvent
- ProcessingInstruction
- Progress
- ProgressEvent
- Screen
- Script
- Select
- Storage
- StorageEvent
- Style
- Table
- TableCell
- TableRow
- TableSection
- Text
- TextArea
- TextMetrics
- TimeRanges
- TypedArray
- URL
- Video
- WebSocket
- Window
- Worker
- WorkerGlobalScope
- WorkerLocation
- WorkerNavigator
- XMLHttpRequest
- XMLHttpRequestUpload