Compatibilidad con el gesto de arrastrar hacia dentro

Adobe AIR 1.0 y posterior

Para tener compatibilidad con el gesto de arrastrar hacia dentro, la aplicación (o, lo que es más común, un componente visual de la aplicación) debe responder a los eventos nativeDragEnter o nativeDragOver .

Pasos de una operación típica de colocar

La siguiente secuencia de eventos es típica de una operación de colocar:

  1. El usuario arrastra un objeto de portapapeles sobre un componente.

  2. El componente distribuye un evento nativeDragEnter .

  3. El controlador de eventos nativeDragEnter examina el objeto de evento para comprobar los formatos de datos disponibles y las acciones admitidas. Si el componente puede controlar la operación de colocar, llama a NativeDragManager.acceptDragDrop() .

  4. El NativeDragManager cambia el cursor del ratón para indicar que se puede colocar el objeto.

  5. El usuario coloca el objeto sobre el componente.

  6. El componente receptor distribuye un evento nativeDragDrop .

  7. El componente receptor lee los datos en el formato deseado del objeto Clipboard dentro del objeto de evento.

  8. Si el gesto de arrastrar originó en una aplicación de AIR, el objeto interactivo iniciador distribuye un evento nativeDragComplete . Si el gesto originó fuera de AIR, no se envía ninguna confirmación.

Reconocimiento de un gesto de arrastrar hacia dentro

Cuando un usuario arrastra un elemento del portapapeles para introducirlo dentro de los límites de un componente visual, el componente distribuye eventos nativeDragEnter y nativeDragOver events. Para determinar si el componente puede aceptar el elemento del portapapeles, los controladores de estos eventos pueden comprobar las propiedades clipboard y allowedActions del objeto de evento. Para indicar que el componente puede aceptar que se le coloque el elemento, el controlador de eventos debe llamar al método NativeDragManager.acceptDragDrop() , pasando una referencia al componente receptor. Si hay más de un detector de eventos registrado que llama al método acceptDragDrop() , tiene preferencia el último controlador de la lista. La llamada al método acceptDragDrop() sigue siendo válida hasta que el ratón sale fuera del objeto receptor, activando el evento nativeDragExit .

Si se admite más de una acción en el parámetro allowedActions que se pasa a doDrag() , el usuario puede pulsar una tecla modificadora para indicar cuál de las acciones admitidas pretenden realizar. El gestor de la acción de arrastrar cambia la imagen del cursor para indicar al usuario qué acción se produce si coloca el objeto. La propiedad dropAction del objeto NativeDragEvent notifica la acción que se pretende realizar. La acción configurada para un gesto de arrastrar no es más que orientativa. Los componentes involucrados en la transferencia deben implementar el comportamiento que corresponda. Para finalizar una acción de mover, por ejemplo, el iniciador de la operación de arrastrar puede eliminar el elemento arrastrado y el destino puede añadirlo.

El destino de arrastre puede limitar la acción de colocar a una de tres acciones posibles mediante la definición de la propiedad dropAction de la clase NativeDragManager. Si un usuario intenta elegir otra acción con el teclado, NativeDragManager muestra el cursor de indisposición . Defina la propiedad dropAction de los controladores para ambos eventos, nativeDragEnter y nativeDragOver .

El ejemplo siguiente ilustra un controlador de eventos para un evento nativeDragEnter o nativeDragOver . Este controlador solo acepta un gesto de arrastrar hacia dentro si el portapapeles que se arrastra contiene datos en formato de texto.

import flash.desktop.NativeDragManager; 
import flash.events.NativeDragEvent; 
 
public function onDragIn(event:NativeDragEvent):void{ 
    NativeDragManager.dropAction = NativeDragActions.MOVE; 
    if(event.clipboard.hasFormat(ClipboardFormats.TEXT_FORMAT)){ 
        NativeDragManager.acceptDragDrop(this); //'this' is the receiving component 
    } 
}

Finalización de la operación de colocar

Cuando el usuario coloca un elemento arrastrado en un objeto interactivo que ha aceptado el gesto, el objeto interactivo distribuye un evento nativeDragDrop . El controlador de este evento puede extraer los datos de la propiedad clipboard del objeto de evento.

Si el portapapeles contiene un formato definido por la aplicación, el parámetro transferMode que se pasa al método getData() del objeto Clipboard determina si el gestor de la acción de arrastrar devuelve una referencia o una versión serializada del objeto.

El ejemplo siguiente ilustra un controlador de eventos para el evento nativeDragDrop .

import flash.desktop.Clipboard; 
import flash.events.NativeDragEvent; 
 
public function onDrop(event:NativeDragEvent):void { 
    if (event.clipboard.hasFormat(ClipboardFormats.TEXT_FORMAT)) { 
    var text:String = 
        String(event.clipboard.getData(ClipboardFormats.TEXT_FORMAT,  
                                    ClipboardTransferMode.ORIGINAL_PREFERRED)); 
}

Una vez que sale el controlador de eventos, el objeto Clipboard ya no es válido. Todo intento de acceso al objeto o a sus datos genera un error.

Actualización del aspecto visual de un componente

Un componente puede actualizar su aspecto visual con base en los eventos NativeDragEvent. En la tabla siguiente se describen los tipos de modificaciones que efectuaría un componente característico como respuesta a los distintos eventos:

Evento

Descripción

nativeDragStart

El objeto interactivo iniciador puede utilizar el evento nativeDragStart para presentar una confirmación visual de que el gesto de arrastrar originó en ese objeto interactivo.

nativeDragUpdate

El objeto interactivo iniciador puede utilizar el evento nativeDragUpdate para actualizar su estado durante el gesto. (Este evento no existe en AIR para Linux.)

nativeDragEnter

Un objeto interactivo receptor potencial puede utilizar este evento para recibir la selección de entrada, o para indicar visualmente que puede o no aceptar que se le coloque el elemento.

nativeDragOver

Un objeto interactivo receptor potencial puede utilizar este evento para responder al movimiento del ratón dentro del objeto interativo, como cuando el ratón pasa a una región “activa” de un componente complejo; por ejemplo, una visualización de un plano callejero.

nativeDragExit

Un objeto interactivo receptor potencial puede utilizar este evento para restaurar su estado cuando un gesto de arrastrar se sale de sus límites.

nativeDragComplete

El objeto interactivo iniciador puede utilizar este evento para actualizar su modelo de datos asociado -eliminando un elemento de una lista, por ejemplo- y restaurar su estado visual.

Seguimiento de la posición del ratón durante un gesto de arrastrar hacia dentro

Mientras un gesto de arrastrar permanece sobre un componente, dicho componente distribuye eventos nativeDragOver . Estos eventos se distribuyen cada pocos milisegundos y también cada vez que se mueve el ratón. El objeto de evento nativeDragOver puede utilizarse para determinar la posición del ratón sobre el componente. Tener acceso a la posición del ratón puede resultar útil si el componente receptor es complejo pero no está compuesto por subcomponentes. Por ejemplo, si la aplicación presenta un mapa de bits que contiene un plano callejero y usted desea resaltar zonas del plano cuando el usuario arrastra información hasta ellas, puede utilizar las coordenadas del ratón notificadas en el evento nativeDragOver para realizar un seguimiento de la posición del ratón en el plano.