mozilla

Revision 166489 of Arrastrar y soltar

  • Enlace amigable (slug) de la revisión: Arrastrar_y_soltar
  • Título de la revisión: Arrastrar y soltar
  • Id de la revisión: 166489
  • Creada:
  • Creador: Dukebody
  • ¿Es la revisión actual? No
  • Comentario
Etiquetas: 

Contenido de la revisión

{{wiki.template('Traducción', [ "inglés", "Drag_and_Drop", "en" ])}}


{{template.Next("Drag and Drop JavaScript Wrapper")}} Esta sección describe cómo implementar objetos que pueden ser arrastrados y soltados dentro de otros objetos.

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 arrastrar y soltar objetos.

Un usuario puede empezar a arrastrar un objeto pulsando el botón del ratón y moviéndolo. Se termina de arrastarar 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 arrastar 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 {{template.Fx_minversion_inline(3)}}
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 {{template.Fx_minversion_inline(3)}} 
un alias de ondraggesture; es el nombre de la especificación HTML 5 para el evento y puede ser usado 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 él. 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 {{template.Fx_minversion_inline(3)}} 
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 arrastar, 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> mientras dure el 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 indicar retroalimentación. Debería ser fijada normalmente 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 if the element the mouse is currently over can accept the object currently being dragged to be dropped on it. Set the value to <tt>false</tt> if it doesn't make sense to drop the object on it. This should be changed in the <tt>ondragover</tt> and <tt>ondragenter</tt> event handlers.
dragAction 
Set to the current action to be performed, which should be one or more of the constants described earlier. This can be used to provide extra feedback to the user.
numDropItems 
The number of items being dragged. For example, this will be set to 5 if five bookmarks are being dragged.
getData(transfer,index) 
Get the data being dragged. The first argument should be an nsITransferable object to hold the data. The second argument, index, should be the index of the item to return.
sourceDocument 
The document where the drag started.
sourceNode 
The DOM node where the drag started.
isDataFlavorSupported(flavor) 
Returns <tt>true</tt> if the data being dragged contains data of the specified flavor.

{{template.Next("Drag and Drop JavaScript Wrapper")}}

Original Document Information

  • Author(s): Neil Deakin
  • Original Document: http://xulplanet.com/tutorials/mozsdk/dragdrop.php
  • Copyright Information: Copyright (C) Neil Deakin
{{ wiki.languages( { "en": "en/Drag_and_Drop" } ) }}

Fuente de la revisión

<p>
</p><p>{{wiki.template('Traducción', [ "inglés", "Drag_and_Drop", "en" ])}}
</p><p><br>
{{template.Next("Drag and Drop JavaScript Wrapper")}}
Esta sección describe cómo implementar objetos que pueden ser arrastrados y soltados dentro de otros objetos.
</p>
<h3 name="La_interfaz_de_arrastrar_y_soltar">La interfaz de arrastrar y soltar</h3>
<p>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 <a href="es/XUL">XUL</a> proporcionan varios eventos para gestionar los intentos del usuario arrastrar y soltar objetos.
</p><p>Un usuario puede empezar a arrastrar un objeto pulsando el botón del ratón y moviéndolo. Se termina de arrastarar 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.
</p><p>Mozilla implementa el arrastre por medio de sesiones de arrastre. Cuando un usuario solicita arrastar 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.
</p><p>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.
</p><p>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.
</p>
<dl><dt> ondrag {{template.Fx_minversion_inline(3)}}</dt><dd> llamado periódicamente a lo largo de la operación de arrastrar y soltar.
</dd><dt> ondraggesture </dt><dd> 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.
</dd><dt> ondragstart {{template.Fx_minversion_inline(3)}} </dt><dd> un alias de <code>ondraggesture</code>; es el nombre de la especificación HTML 5 para el evento y puede ser usado 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 <code>ondraggesture</code>.
</dd><dt> ondragover </dt><dd> este gestor de evento es llamado por un elemento cuando se está arrastrando algo sobre él. Si el objeto puede ser soltado sobre el elemento, se debería notificar a la sesión de arrastre.
</dd><dt> ondragenter </dt><dd> 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.
</dd><dt> ondragexit </dt><dd> 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.
</dd><dt> ondragdrop </dt><dd> 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.
</dd><dt> ondragend {{template.Fx_minversion_inline(3)}} </dt><dd> se llama cuando se suelta un objeto.
</dd></dl>
<p>Hay dos formas de gestionar eventos de arrastrar y soltar. La primera implica usar las interfaces de arrastrar y soltar de <a href="es/XPCOM">XPCOM</a> directamente. La segunda consiste en usar un objeto <a href="es/Drag_and_Drop_JavaScript_Wrapper">adaptador JavaScript </a> que gestione algunas de ellas por ti. Puedes encontrar el código de este adaptador en un archivo llamado <a class="external" href="http://lxr.mozilla.org/mozilla/source/toolkit/content/nsDragAndDrop.js">nsDragAndDrop.js</a>, que está contenido en el paquete (o global) widget-toolkit.
</p>
<h3 name="Arrastrar_y_soltar_XPCOM">Arrastrar y soltar XPCOM</h3>
<p>Se utilizan dos interfaces para implementar arrastrar y soltar. La primera es un servicio de arrastre,
<a href="es/NsIDragService">nsIDragService</a>, y la segunda es una sesión de arrastre, <a href="es/NsIDragSession">nsIDragSession</a>.
</p><p>El <a href="es/NsIDragService">nsIDragService</a> es responsable de crear sesiones de arrastre cuando se empieza a arrastar, 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.
</p><p>La función invokeDragSession acepta cuatro parámetros, tal y como se describe debajo:
</p>
<pre class="eval">invokeDragSession(element,transferableArray,region,actions)
</pre>
<dl><dt> element </dt><dd> una referencia al elemento que se está arrastrando. Puede obtenerse a través de la propiedad <tt>event.target</tt> mientras dure el gestor de eventos.
</dd><dt> transferableArray </dt><dd> un vector de objetos <a href="es/NsITransferable">nsITransferable</a>, 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.
</dd><dt> region </dt><dd> una región usada para indicar retroalimentación. Debería ser fijada normalmente a null.
</dd><dt> actions </dt><dd> 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.
</dd></dl>
<dl><dt> nsIDragSession.DRAGDROP_ACTION_NONE </dt><dd><dl><dt> se usa para indicar que el arrastre no es válido.
</dt><dt> nsIDragSession.DRAGDROP_ACTION_COPY </dt><dd> el elemento arrastrado se debería copiar al lugar donde se soltó.
</dd><dt> nsIDragSession.DRAGDROP_ACTION_MOVE </dt><dd> el elemento que se arrastra se debería mover al lugar donde se soltó.
</dd><dt> nsIDragSession.DRAGDROP_ACTION_LINK </dt><dd> 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ó.
</dd></dl>
</dd></dl>
<p>La interfaz <a href="es/NsIDragService">nsIDragService</a> 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 <a href="es/NsIDragSession">nsIDragSession</a>.
</p><p>La interfaz <a href="es/NsIDragSession">nsIDragSession</a> se usa para obtener y fijar propiedades del arrastre en curso. Están disponibles las siguientes propiedades y métodos:
</p>
<dl><dt> canDrop </dt><dd> fija esta propiedad a <tt>true</tt> si el if the element the mouse is currently over can accept the object currently being dragged to be dropped on it. Set the value to <tt>false</tt> if it doesn't make sense to drop the object on it. This should be changed in the <tt>ondragover</tt> and <tt>ondragenter</tt> event handlers.
</dd><dt> dragAction </dt><dd> Set to the current action to be performed, which should be one or more of the constants described earlier. This can be used to provide extra feedback to the user.
</dd><dt> numDropItems </dt><dd> The number of items being dragged. For example, this will be set to 5 if five bookmarks are being dragged.
</dd><dt> getData(transfer,index) </dt><dd> Get the data being dragged. The first argument should be an <a href="es/NsITransferable">nsITransferable</a> object to hold the data. The second argument, index, should be the index of the item to return.
</dd><dt> sourceDocument </dt><dd> The document where the drag started.
</dd><dt> sourceNode </dt><dd> The <a href="es/DOM">DOM</a> node where the drag started.
</dd><dt> isDataFlavorSupported(flavor) </dt><dd> Returns <tt>true</tt> if the data being dragged contains data of the specified flavor.
</dd></dl>
<p>{{template.Next("Drag and Drop JavaScript Wrapper")}}
</p>
<div class="originaldocinfo">
<h2 name="Original_Document_Information">Original Document Information</h2>
<ul><li> Author(s): <a class="external" href="mailto:enndeakin@sympatico.ca">Neil Deakin</a>
</li><li> Original Document: http://xulplanet.com/tutorials/mozsdk/dragdrop.php
</li><li> Copyright Information: Copyright (C) <a class="external" href="mailto:enndeakin@sympatico.ca">Neil Deakin</a>
</li></ul>
</div>
<div class="noinclude">
</div>
{{ wiki.languages( { "en": "en/Drag_and_Drop" } ) }}
Revertir a esta revisión