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: 166492
  • Creada:
  • Creador: RickieesES
  • ¿Es la revisión actual? No
  • Comentario Correcciones menores ortográficas y gramaticales

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 de 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 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 {{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 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 é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 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.

{{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 de 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 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.
</p><p>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.
</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 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 <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 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.
</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> dentro del 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 proporcionar información de la operación. Normalmente debe fijarse  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 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>.
</dd><dt> dragAction </dt><dd> 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.
</dd><dt> numDropItems </dt><dd> el número de elementos que se arrastran. Por ejemplo, se fijará a 5 si se están arrastrando cinco marcadores.
</dd><dt> getData(transfer,index) </dt><dd> devuelve los datos que se arrastran. El primer argumento debe ser un objeto <a href="es/NsITransferable">nsITransferable</a> para albergar los datos. El segundo argumento, index, debe ser el índice del elemento que se debe devolver.
</dd><dt> sourceDocument </dt><dd> el documento donde empezó el arrastre.
</dd><dt> sourceNode </dt><dd> el nodo <a href="es/DOM">DOM</a> donde empezó el arrastre.
</dd><dt> isDataFlavorSupported(flavor) </dt><dd> devuelve <tt>true</tt> si los datos que se arrastran contienen datos del tipo (sabor) especificado.
</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