Arrastrar y soltar

La interfaz de arrastrar y soltar

Muchas interfaces de usuario permiten arrastrar objetos particulares dentro de la interfaz. Por ejemplo, arrastrar archivos a otros directorios, o arrastrar un icono a otra ventana para abrir el documento que representa. Mozilla y XUL proporcionan varios eventos para gestionar los intentos del usuario de arrastrar y soltar objetos.

El usuario puede empezar a arrastrar un objeto pulsando el botón del ratón y moviéndolo. Se termina de arrastrar cuando el usuario suelta el botón del ratón. Los gestores de eventos se llaman cuando el usuario empieza y termina de arrastrar, y también en varios puntos intermedios.

Mozilla implementa el arrastre por medio de sesiones de arrastre. Cuando un usuario solicita arrastrar algo que puede ser arrastrado, se debería iniciar una sesión de arrastre. La sesión de arrastre gestiona la actualización del puntero del ratón y dónde debería ser soltado el objeto. Si no se puede arrastrar algo, no se debería iniciar una sesión de arrastre. Ya que el usuario general sólo tiene un ratón, sólo se utiliza una sesión de arrastre simultáneamente.

Ten en cuenta que las sesiones de arrastre pueden ser creadas desde Mozilla o desde otras aplicaciones. Mozilla traducirá los datos que se arrastran si se necesita.

La lista inferior describe los gestores de eventos que pueden ser llamados, y que pueden ser asociados cualquier elemento. Sólo necesitas fijar valores para los gestores cuando necesitas que pase algo al activarse el evento.

ondrag

llamado periódicamente a lo largo de la operación de arrastrar y soltar.

ondraggesture 

llamado cuando el usuario empieza a arrastrar el elemento, lo que ocurre normalmente cuando el usuario pulsa el botón del ratón y lo mueve. El script de este gestor debería iniciar y configurar una sesión de arrastre.

ondragstart  

un alias de ondraggesture; es el nombre de la especificación HTML 5 para el evento y puede usarse en HTML y XUL; sin embargo, para mantener la compatibilidad con versiones más antiguas de Firefox, es posible que quieras continuar usando en XUL ondraggesture.

ondragover 

este gestor de evento es llamado por un elemento cuando se está arrastrando algo sobre el elemento al cual se le aplica ondragover. Si el objeto puede ser soltado sobre el elemento, se debería notificar a la sesión de arrastre.

ondragenter 

es llamado por un elemento cuando el puntero del ratón se mueve por primera vez sobre él mientras se está arrastrando algo. Se puede usar para cambiar la apariencia del elemento y así indicar al usuario que el objeto puede ser soltado en él.

ondragexit 

es llamado por un elemento cuando el puntero del ratón abandona el elemento mientras se está arrastrando algo. También es llamado tras soltar el objeto, para que el elemento pueda eliminar cualquier resaltado u otra indicación.

ondragdrop 

este gestor de evento es llamado por un elemento cuando se suelta algo en el elemento. En este punto, el usuario ya ha soltado el botón del ratón. El elemento puede simplemente ignorar el evento o gestionarlo de alguna manera, tal como pegar el objeto dentro de sí mismo.

ondragend  

se llama cuando se suelta un objeto.

Hay dos formas de gestionar eventos de arrastrar y soltar. La primera implica usar las interfaces de arrastrar y soltar de XPCOM directamente. La segunda consiste en usar un objeto adaptador JavaScript que gestione algunas de ellas por ti. Puedes encontrar el código de este adaptador en un archivo llamado nsDragAndDrop.js, que está contenido en el paquete (o global) widget-toolkit.

Arrastrar y soltar XPCOM

Se utilizan dos interfaces para implementar arrastrar y soltar. La primera es un servicio de arrastre, nsIDragService, y la segunda es una sesión de arrastre, nsIDragSession.

El nsIDragService es responsable de crear sesiones de arrastre cuando se empieza a arrastrar, y de eliminar la sesión de arrastre cuando se haya acabado de arrastrar. Para iniciar un arrastre, se debería llamar a la función <tt>invokeDragSession</tt> dentro de un gestor de eventos <tt>ondraggesture</tt>. Cuando se llama a esta función, comienza el arrastre.

La función invokeDragSession acepta cuatro parámetros, tal y como se describe debajo:

invokeDragSession(element,transferableArray,region,actions)

element 

una referencia al elemento que se está arrastrando. Puede obtenerse a través de la propiedad <tt>event.target</tt> dentro del gestor de eventos.

transferableArray 

un vector de objetos nsITransferable, uno por cada elemento que se está arrastrando. Se usa un vector para permitir arrastrar varios objetos a la vez, como por ejemplo un grupo de archivos.

region 

una región usada para proporcionar información de la operación. Normalmente debe fijarse a null.

actions 

las acciones que usa el arrastre. Suele fijarse como una de las siguientes constantes, o como varias de ellas juntas. La acción puede cambiarse a lo largo del arrastre dependiendo de sobre qué elemento se está arrastrando.

nsIDragSession.DRAGDROP_ACTION_NONE 

se usa para indicar que el arrastre no es válido.

nsIDragSession.DRAGDROP_ACTION_COPY 

el elemento arrastrado se debería copiar al lugar donde se soltó.

nsIDragSession.DRAGDROP_ACTION_MOVE 

el elemento que se arrastra se debería mover al lugar donde se soltó.

nsIDragSession.DRAGDROP_ACTION_LINK 

se debería crear un enlace (o un acceso directo, o un alias) al elemento que se está arrastrando en el lugar donde se soltó.

La interfaz nsIDragService también proporciona la función <tt>getCurrentSession</tt>, que puede ser llamada desde los gestores de eventos para obtener y modificar el estado del arrastre. La función devuelve un objeto que implementa nsIDragSession.

La interfaz nsIDragSession se usa para obtener y fijar propiedades del arrastre en curso. Están disponibles las siguientes propiedades y métodos:

canDrop 

fija esta propiedad a <tt>true</tt> si el elemento sobre el que está el ratón permite que el objeto que se está arrastrando se suelte en él. Fija el valor a <tt>false</tt> si no tiene sentido soltar el objeto en él. Se debería cambiar en los gestores de eventos <tt>ondragover</tt> y <tt>ondragenter</tt>.

dragAction 

fija la acción que debe ser ejecutada, la cual debería ser una o varias de las constantes descritas anteriormente. Se puede usar para proporcionar información adicional al usuario.

numDropItems 

el número de elementos que se arrastran. Por ejemplo, se fijará a 5 si se están arrastrando cinco marcadores.

getData(transfer,index) 

devuelve los datos que se arrastran. El primer argumento debe ser un objeto nsITransferable para albergar los datos. El segundo argumento, index, debe ser el índice del elemento que se debe devolver.

sourceDocument 

el documento donde empezó el arrastre.

sourceNode 

el nodo DOM donde empezó el arrastre.

isDataFlavorSupported(flavor) 

devuelve <tt>true</tt> si los datos que se arrastran contienen datos del tipo (sabor) especificado.