Como desarrollador front-end, en ocasiones nos encontramos en situaciones donde tenemos que extender funcionalidades de librerías o plugins de jQuery ya implementadas en nuestras aplicaciones. En este artículo veremos un sencillo ejemplo del código javascript que utilicé para extender la funcionalidad de un carrusel de imágenes con un swipe horizontal usando la delegación de eventos

Esta es la demo completa del ejemplo:

See the Pen Customized Horizontal Swipe by Yon Zubizarreta (@yzubizarreta) on CodePen.

La lógica del ejemplo se basa en el cálculo de varios valores que determinan si la acción realizada por el usuario es un swipe horizontal. Los objetos touchStartCoords y touchEndCoords representan las coordenadas X e Y del evento en el inicio y final de la ejecución, mientras que las variables minDistanceXAxis y maxDistanceYAxis definen los límites de las distancia recorrida por esta. La variable maxAllowedTime define el máximo de tiempo de ejecución permitido y targetElement representa el elemento donde delegaremos los eventos.

Para realizar el cálculo construímos principalmente dos funciones, swipeStart y swipeEnd. En la función swipeStart definimos los valores iniciales para el cálculo, mientras que en la función swipeEnd calculamos los límites tanto de las coordenadas X e Y como del tiempo entre el inicio y final del proceso. En base a estos valores definimos si el usuario a realizado un swipe sobre el elemento.

Por otro lado hacemos uso de la delegación de eventos para lanzar las funciones definidas anteriormente. Usamos el método addEventListener para registrar los listeners de los eventos mousedown y touchstart que lanzarán la función swipeStart. Los eventos mousemove y touchmove lanzarán la función swipeMove mientras que mouseup y tochend hará los mismo con la función swipeEnd. Al usar javascript nativo para construir el ejemplo, he tenido que definir la función addMultipleListeners para poder delegar múltiples eventos en un elemento del DOM.

En este ejemplo tenemos otra función en la que no nos hemos parado todavía, la función swipeMove. Esta simple función tan solo contiene un preventDefault que nos permite evitar efectos de arrastre del elemento tras el touchstart.

Finalmente, el código javascript completo quedará así:

See the Pen Customized Horizontal Swipe by Yon Zubizarreta (@yzubizarreta) on CodePen.

En resumen, este ejemplo os puede servir como punto de partida para vuestra propia implementación de efectos de arrastre horizontal. Podéis ver un ejemplo de mi implementación en las adaptaciones para tablet y móvil en las páginas de producto de Morphsuits.

Almacenado en: lenguajes, web

comentarios

No hay ningún comentario.