По умолчанию текст разрешается перетаскивать только в редактируемые области страницы. Можно указать, что элемент и его дочерние элементы являются редактируемыми, включив в открывающий тег элемента атрибут
contenteditable
. Можно сделать редактируемым весь документ. Для этого установите для свойства объекта документа
designMode
значение
"on"
.
Альтернативное поведение при перетаскивании на странице может быть задано с помощью обработки событий
dragenter
,
dragover
и
drop
для любых элементов, принимающих перетаскиваемые данные.
Разрешение жеста «перетаскивания в»
Для обработки жеста «перетаскивания в» необходимо сначала отменить поведение по умолчанию. На любых HTML-элементах, которые используются в качестве целевых при перетаскивании, необходимо прослушивать события
dragenter
и
dragover
. В обработчиках этих событий вызывается метод
preventDefault()
отправляемого объекта события. Отмена поведения по умолчанию позволяет перетаскивать данные и в нередактируемые области.
Получение перетаскиваемых данных
Перетаскиваемые данные могут использоваться в обработчике события
ondrop
:
function doDrop(event){
droppedText = event.dataTransfer.getData("text/plain");
}
С помощью метода
dataTransfer.getData()
данные могут считываться в буфер обмена путем передачи типа MIME формата считываемых данных. Узнать, какие форматы данных доступны, можно с помощью свойства
types
объекта
dataTransfer
. Массив
types
содержит строку типа MIME для каждого из доступных форматов.
Если поведение по умолчанию в событиях dragenter и dragover отменяется, разработчику необходимо самостоятельно вставить все перетаскиваемые данные в нужное место документа. Не существует API-интерфейса, который позволял бы преобразовать положение мыши в точку вставки внутри элемента. Это ограничение может осложнить реализацию жестов перетаскивания со вставкой.
|
|
|