Arrastrar datos dentro de un elemento HTML
Adobe AIR 1.0 y posterior
|
El comportamiento predeterminado solo permite arrastrar texto a las regiones editables de la página. Para especificar que un elemento y sus elementos secundarios sean editables, incluya el atributo
contenteditable
en la etiqueta inicial del elemento. Un documento entero también puede transformarse en editable si se define la propiedad
designMode
del objeto de documento en
"on"
.
Se puede permitir otro comportamiento de arrastrar hacia dentro en una página si se controlan los eventos
dragenter
,
dragover
y
drop
para cualquier elemento que acepte datos arrastrados.
Activación de arrastrar hacia dentro
Para controlar el gesto de arrastrar hacia dentro, primero hay que cancelar el comportamiento predeterminado. Detecte si hay eventos
dragenter
y
dragover
en cualquiera de los elementos HTML que desee utilizar como destino. En los controladores de estos eventos, llame al método
preventDefault()
del objeto de evento distribuido. La cancelación del comportamiento predeterminado permite colocar datos arrastrados en las regiones no editables.
Obtención de los datos colocados
Se puede tener acceso a los datos colocados en el controlador del evento
ondrop
:
function doDrop(event){
droppedText = event.dataTransfer.getData("text/plain");
}
Utilice el método
dataTransfer.getData()
para leer los datos y ponerlos en el portapapeles, pasando el tipo MIME del formato de datos a leerse. Para averiguar qué formatos de datos están disponibles, utilice la propiedad
types
del objeto
dataTransfer
. El conjunto
types
contiene la cadena de tipo MIME de cada formato disponible.
Cuando cancela el comportamiento predeterminado en los eventos dragenter o dragover, usted queda responsable de introducir los datos colocados en el lugar correspondiente del documento. No existe ninguna API que convierta una posición del ratón en posición de inserción en un elemento. Esta limitación puede dificultar la implementación de gestos de arrastrar tipo inserción.
|
|
|
