Animación de secuencias de arrastrar y colocar (HTML)
[ Este artículo está destinado a desarrolladores de Windows 8.x y Windows Phone 8.x que escriben aplicaciones de Windows en tiempo de ejecución. Si estás desarrollando para Windows 10, consulta la documentación más reciente
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 funciones:
- 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 ListView y GridLayout para JavaScript, se admite el arrastre de forma predeterminada. Las animaciones de arrastrar y colocar están integradas al usar estos controles en la interfaz de usuario. Pero las animaciones descritas en este tema son útiles para ampliar las funciones de arrastrar y colocar a otros controles, en concreto a tus propios controles personalizados.
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.
.png "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.
.png "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")
En la siguiente imagen se muestra el caso en el que los objetos vecinos no se ven afectados.
.png "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. Al mismo tiempo, elimina 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 que se usan 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.
.png "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")
En la imagen siguiente se muestra un caso en el que el objeto colocado no afecta a otros objetos. El origen de arrastre vuelve a aparecer más grande y desplazado con respecto a los otros objetos, pero estos aparecen con su tamaño normal.
.png "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.
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 apartarán 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 el origen de arrastre desencadene la animación de entrada de arrastre entre.
.png "Objeto de origen de arrastre superpuesto a dos objetos afectados que aparecen en sus posiciones originales")
En la imagen siguiente, la animación de entrada de arrastre entre hizo que se apartaran los dos objetos situados a ambos lados del origen de arrastre.
.png "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.
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.
Otros recursos
Encontrarás ejemplos de código sobre el uso de las funciones de animación de arrastrar y colocar en la Muestra de la biblioteca de animaciones HTML.
Consulta los procedimientos recomendados de diseño para el uso de estas animaciones en Directrices y lista de comprobación para animaciones de arrastrar y colocar.
Temas relacionados
Animación de la interfaz de usuario
dragSourceStart