Aplicaciones de Windows
Contraer la tabla de contenido
Expandir la tabla de contenido

Animación de secuencias de arrastrar y colocar (aplicaciones de la Tienda Windows con JavaScript y HTML)

Usa las animaciones de arrastrar y colocar cuando los usuarios muevan objetos con el dedo o con dispositivos de entrada, como un mouse o lápiz. Las acciones de arrastrar y colocar más comunes son mover un solo elemento en una lista y colocar un elemento encima de otro.

Nota  Usa las animaciones de arrastrar y colocar únicamente cuando el usuario mueva el objeto. Para mover el objeto de otra manera, usa la animación de reposición.

Este conjunto de animaciones se compone de las siguientes API:

  • dragSourceStart: el usuario comienza a arrastrar un objeto.
  • dragBetweenEnter: el usuario arrastra un objeto entre otros dos objetos entre los que se puede colocar.
  • dragBetweenLeave: el usuario arrastra un objeto alejándolo de una ubicación de destino posible.
  • dragSourceEnd: el usuario coloca un objeto que había arrastrado.

En el vídeo siguiente se muestran las animaciones relacionadas con la operación de arrastrar y colocar:

|

Inicio de arrastre

Cada secuencia de animación de arrastrar y colocar comienza con un inicio de arrastre (dragSourceStart), que se muestra cuando el usuario comienza a arrastrar un objeto.

Esta animación modifica la apariencia tanto del origen de arrastre (el objeto que se arrastra) como de uno o varios objetos afectados. Un objeto afectado es un objeto que puede cambiar su posición como respuesta a la secuencia de arrastrar y colocar. Por ejemplo, al reordenar una lista, todos los elementos de la lista que no sean el origen de arrastre son objetos afectados, porque su posición en la lista puede variar. Los elementos afectados se animan para mostrarle al usuario cómo esos elementos cambiarían su posición como respuesta a la acción actual. Ten en cuenta que no todos los orígenes de arrastre tienen objetos afectados.

Para usar la función dragSourceStart, necesitarás conocer el objeto que el usuario está arrastrando y los objetos afectados.

En las siguientes imágenes se muestra la relación del origen de arrastre y los objetos afectados en la animación de inicio de arranque. La primera imagen muestra el objeto de arrastrar y sus vecinos antes de que el usuario empiece a arrastrar el objeto.

Cuatro objetos del mismo tamaño, uno etiquetado como el origen de arrastre

Cuando el usuario selecciona el objeto y empieza a arrastrarlo, el objeto arrastrado se hace más grande y los objetos afectados, más pequeños.

Cuatro objetos, con el origen de arrastre que aumenta en tamaño y los otros tres objetos afectados que disminuyen un poco en tamaño

Si los objetos vecinos no se ven afectados, no se hace más pequeño.

Cuatro objetos, con el origen de arrastre que aumenta en tamaño y los otros tres sin cambios en el tamaño inicial

Fin de arrastre

Cada secuencia de animación de arrastrar y colocar termina con la animación de fin de arrastre (dragSourceEnd), que se muestra cuando el usuario coloca un objeto arrastrado. La animación de fin de arrastre solo se usa si primero se usó el inicio de arrastre.

Esta animación coloca el origen de arrastre (el objeto que se está arrastrando) en su posición final. También quita los cambios visuales del origen de arrastre y de los elementos afectados que aplicó la animación de inicio de arrastre. Los objetos afectados en una llamada a dragSourceEnd son siempre los mismos objetos afectados en la llamada a dragSourceStart.

Para usar la función dragSourceEnd, necesitarás conocer el objeto que el usuario está colocando, la posición final del objeto colocado y los objetos afectados (si estuvieran incluidos en la función dragSourceStart).

Las imágenes siguientes muestran la relación del origen de arrastre y los objetos afectados en animación de fin de arrastre. La primera imagen muestra un objeto antes de que el usuario lo coloque en un grupo de objetos afectados. El origen de arrastre aparece con un tamaño más grande de lo normal y desplazado con respecto a la lista. Los objetos afectados aparecen con un tamaño más pequeño de lo normal.

Cuatro objetos, con el origen de arrastre que aumenta en tamaño y en posición de desplazamiento con respecto al plano de los otros tres objetos afectados, que disminuyen un poco en tamaño

Si el objeto arrastrado no afecta a otros objetos, el origen de arrastre vuelve a ser más grande y desplazado con respecto a los otros, pero los otros objetos aparecen con su tamaño normal.

Cuatro objetos, con el origen de arrastre que aumenta en tamaño y en posición de desplazamiento con respecto a los otros tres objetos, los cuales no cambian su tamaño inicial

Una vez que el usuario coloca el origen de arrastre, todos los objetos vuelven a su tamaño normal y cambian la posición, si fuera necesario.

Cuatro objetos del mismo tamaño, uno etiquetado como el origen de arrastre

Entrada de arrastre entre

Usa la animación de entrada de arrastre entre (dragBetweenEnter) cuando el usuario arrastra un objeto (el origen de arrastre) entre otros dos objetos entre los que se puede colocar. Esta animación muestra al usuario cómo los objetos afectados se apartan para hacer sitio al origen de arrastre, si el usuario elige colocar el origen de arrastre en esa posición.

Para usar la función dragBetweenEnter, necesitarás conocer los objetos afectados y la dirección en la que se moverán y la distancia que recorrerán esos objetos como parte de la animación.

En las siguientes imágenes se muestra el movimiento de los objetos afectados en respuesta al origen de arrastre. En la primera imagen aparecen los objetos afectados antes de que la posición del origen de arrastre desencadene la animación de entrada de arrastre entre.

Objeto de origen de arrastre superpuesto a dos objetos afectados que aparecen en sus posiciones originales

En la siguiente imagen, la animación de entrada de arrastre entre hizo que se apartaran dos objetos entre los que se colocará el origen de arrastre.

Objeto de origen de arrastre superpuesto a dos objetos afectados que se separaron para mostrar la ubicación de destino

Salida de arrastre entre

Usa la animación de salida de arrastre entre (dragBetweenLeave) cuando el usuario arrastra el origen de arrastre alejándolo de un área de colocación legítima entre dos objetos. Esta animación le muestra al usuario que ya no tiene el origen de arrastre en la posición para colocarlo entre esos dos objetos. La animación de salida de arrastre entre se usa solo después de una animación entrada de arrastre entre.

La acción de la animación de salida de arrastre entre es lo contrario de la animación de entrada de arrastre entre. La animación de salida de arrastre entre vuelve a llevar los objetos afectados a sus sitios originales.

Para usar la función dragBetweenLeave, solo necesitarás conocer los objetos afectados.

En las siguientes imágenes se muestra el movimiento de los objetos afectados en respuesta al origen de arrastre. En la primera imagen aparecen los objetos afectados separados por la animación de entrada de origen de arrastre en respuesta a la posición del origen de arrastre.

Objeto de origen de arrastre superpuesto a dos objetos afectados que se separaron para mostrar la ubicación de destino

En la siguiente imagen, se solicitó la animación de salida de arrastre entre para volver a llevar los objetos afectados a su posición inicial.

Objeto de origen de arrastre superpuesto a dos objetos afectados que aparecen en sus posiciones originales

Otros recursos

Consulta el ejemplo sobre el uso de las animaciones de la Biblioteca de animaciones para obtener ejemplos de códigos que muestran el uso de las API de animaciones de arrastrar y colocar.

Consulta Directrices y lista de comprobación para animaciones de arrastrar y colocar para conocer los procedimientos recomendados de diseño para el uso de estas animaciones.

Temas relacionados

Animación de la interfaz de usuario
dragSourceEnd
dragSourceStart
dragBetweenLeave
dragBetweenEnter

 

 

Mostrar:
© 2018 Microsoft