Operación de arrastrar y colocar en HTMLAdobe AIR 1.0 y posterior Para arrastrar datos hacia dentro y hacia fuera de una aplicación basada en HTML (o hacia dentro y hacia fuera del HTML visualizado en un HTMLLoader), se pueden utilizar eventos de arrastrar y colocar en HTML. La API de arrastrar y colocar en HTML permite arrastrar hacia y desde elementos DOM en el contenido HTML. Nota: también se pueden utilizar las API NativeDragEvent y NativeDragManager de AIR mediante la detección de eventos en el objeto HTMLLoader que contiene el contenido HTML. Sin embargo, la API de HTML está mejor integrada con el DOM de HTML y le permite controlar el comportamiento predeterminado.
Comportamiento predeterminado de arrastrar y colocarEl entorno HTML proporciona comportamiento predeterminado para gestos de arrastrar y colocar que implican texto, imágenes y URL. Estos tipos de datos siempre pueden arrastrarse para sacarlos de un elemento si se utiliza el comportamiento predeterminado. Sin embargo, sólo se puede arrastrar texto para introducirlo en un elemento y sólo a elementos en una región editable de la página. Al arrastrar texto entre o dentro de regiones editables de la página, el comportamiento predeterminado realiza una acción de mover. Al arrastrar texto a una región editable desde una región no editable o desde fuera de la aplicación, el comportamiento predeterminado lleva a cabo una acción de copia. El comportamiento predeterminado puede suprimirse si controla uno mismo los eventos de arrastrar y colocar. Para anular el comportamiento predeterminado hay que llamar a los métodos preventDefault() de los objetos distribuidos para los eventos de arrastrar y colocar. Luego se pueden introducir datos en el destino y eliminar datos del origen según haga falta para llevar a cabo la acción seleccionada. La situación predeterminada es que el usuario puede seleccionar y arrastrar cualquier texto, así como arrastrar imágenes y vínculos. Se puede utilizar la propiedad de CSS WebKit -webkit-user-select para controlar cómo puede seleccionarse cualquier elemento HTML. Por ejemplo, si se define -webkit-user-select en none, el contenido del elemento no será seleccionable y, por lo tanto, no se podrá arrastrar. También se puede utilizar la propiedad de CSS -webkit-user-drag para controlar si se puede arrastrar un elemento en su totalidad. No obstante, el contenido del elemento se trata por separado. De todos modos, el usuario puede arrastrar una parte seleccionada del texto. Para ver más información, consulte CSS en AIR. Eventos de arrastrar y colocar en HTMLLos eventos distribuidos por el elemento iniciador desde el que origina una operación de arrastrar son:
Los eventos distribuidos por un destino de arrastre son:
El objeto de evento que se distribuye como respuesta a estos eventos es similar a un evento de ratón. Se pueden utilizar propiedades de evento de ratón tales como (clientX, clientY) y (screenX, screenY) para determinar la posición del ratón. La propiedad más importante de un objeto de evento drag es dataTransfer, que contiene los datos arrastrados. El objeto dataTransfer en sí tiene los siguientes métodos y propiedades:
Tipos MIME para la operación de arrastrar y colocar en HTMLLos tipos MIME a utilizar con un objeto dataTransfer de un evento de arrastrar y colocar en HTML incluyen:
También se pueden utilizar otras cadenas MIME, incluidas las que define la aplicación. Sin embargo, cabe la posibilidad de que otras aplicaciones no reconozcan o no puedan utilizar los datos transferidos. Es su responsabilidad añadir datos al objeto dataTransfer en el formato previsto. Importante: Sólo el código que se ejecute en el entorno limitado de la aplicación tiene acceso a los archivos colocados tras una operación de arrastre. Si se intenta leer o definir una propiedad de un objeto File dentro de un entorno limitado ajeno a la aplicación, se produce un error de seguridad. Para obtener más información, consulte Gestión de la colocación de archivos en entornos limitados de HTML ajenos a la aplicación.
Efectos de arrastrar en HTMLEl iniciador del gesto de arrastrar puede limitar los efectos de arrastrar que se admiten mediante la definición de la propiedad dataTransfer.effectAllowed en el controlador del evento dragstart. Se pueden utilizar los siguientes valores de cadenas:
El destino del gesto de arrastrar puede definir la propiedad dataTransfer.dropEffect para indicar la acción que se realiza si el usuario finaliza la operación de colocar. Si el efecto de colocar es una de las acciones admitidas, el sistema muestra el cursor de copiar, mover o vincular, según proceda. De lo contrario, el sistema muestra el cursor de indisposición. Si el destino no define ningún efecto de colocar, el usuario puede elegir entre las acciones admitidas con las teclas modificadoras. Defina el valor dropEffect de los controladores para ambos eventos, dragover y dragenter: function doDragStart(event) {
event.dataTransfer.setData("text/plain","Text to drag");
event.dataTransfer.effectAllowed = "copyMove";
}
function doDragOver(event) {
event.dataTransfer.dropEffect = "copy";
}
function doDragEnter(event) {
event.dataTransfer.dropEffect = "copy";
}
Nota: si bien conviene siempre definir la propiedad dropEffect en el controlador de dragenter, tenga en cuenta que el siguiente evento dragover restaurará el valor predeterminado de la propiedad. Defina dropEffect como respuesta a ambos eventos.
|
|
