es.hideout-lastation.com
Paraíso Para Los Diseñadores Y Desarrolladores


Hacer que los elementos en su sitio sean arrastrables con Draggabilly.js

Hay muchos tutoriales sobre cómo hacer que las cosas se puedan arrastrar en una página web . jQuery es una de las maneras más fáciles. Ni siquiera necesita la interfaz de usuario de jQuery, solo un poco de ayuda de la función de dirección del mouse y quizás algún manejo opcional. Pero, ¿qué pasa si no quieres tocar ningún código jQuery y aún quieres que las cosas se puedan arrastrar? Entonces, draggabilly.js es la herramienta correcta para ti.

Con Draggabilly.js, puede hacer que cualquier elemento en una página web se pueda arrastrar. Puede personalizar el comportamiento del elemento arrastrable, como agregar movimiento de cuadrícula, vincular oyentes de evento a eventos, limitar los movimientos solo al eje xey, y mucho más. También es compatible con varios navegadores, IE8 + e incluso navegadores móviles multitáctiles.

Empezando

Para comenzar, solo necesita incluir la fuente Draggabilly.js en su sitio. No hay necesidad de otras dependencias. Puedes tomar el archivo de GitHub.

En cuanto al resto, trabajarás con alguna función de JavaScript como se muestra a continuación.

Arrastre básico

Debe incluir el siguiente fragmento en su página para que el arrastre pueda funcionar.

 var elem = document.querySelector ('# idHere'); var draggie = new Draggabilly (elem, {// opciones ...}); 

El #idHere es la identificación que debe poner dentro del elemento HTML que desea que se pueda arrastrar. Mientras está en la variable draggie, puede poner una opción si lo desea. Si no necesita tener esa opción, también puede definir el id de la variable elem .

Por ejemplo, si tengo una identificación de #demo sin ninguna opción, entonces puedo escribir el fragmento así:

 var elem = document.querySelector ('# demo'); var draggie = new Draggabilly ('# demo'); 

Luego, dentro del código HTML, llame al ID del elemento que desee, gírelo. El siguiente es un ejemplo básico.

Arrástrame

Hay muchas otras maneras de afectar el comportamiento de Draggabilly. Puede restringir el arrastre para que esté solo en el eje 'y' o 'x' de esta forma:

 nuevo Draggabilly ('#demo', {axis: 'x'}); 

O puede agregar una opción de manejo, que especificará el elemento de inicio de la interacción de arrastre de la siguiente manera:

 var elem = document.querySelector ('# demo'); nuevo Draggabilly (elem, {handle: '.handle'}); 

Esta opción .handle es útil cuando no es necesario arrastrar todos los elementos internos como entradas y formularios. Todavía hay muchas otras opciones que puede agregar como contenciones, grillas, métodos y eventos. Dirígete a la página oficial de dragabbilly para ver la documentación completa.

Pensamiento final

La función de arrastre, en la mayoría de los casos, tiene poco efecto en el diseño web pero sigue siendo bastante importante. Se lleva a cabo con mayor frecuencia en aplicaciones web o juegos. La simplicidad de su instalación y la variedad de diferentes métodos de arrastre lo convierten en una herramienta realmente útil para probar.

18 Ubicaciones de productos descaradas en películas y TV que probablemente se haya olvidado

18 Ubicaciones de productos descaradas en películas y TV que probablemente se haya olvidado

Hay publicidad en todas partes . Los comerciales en la televisión, las vallas publicitarias a través de la autopista, los avisos publicitarios en páginas largas, los temibles pop-ups de Internet. Donde quiera que te enciendas, no puedes alejarte de las cosas. Cualquiera que sea el medio que se le ocurra, es probable que esté cubierto con los anuncios de Verizon que le venden su servicio de Internet de alta velocidad (¿Puedo tener mi dinero ahora?).Ni

(Consejos de tecnología y diseño)

5 verdades sobre las revisiones que los diseñadores no quieren escuchar

5 verdades sobre las revisiones que los diseñadores no quieren escuchar

Oh, revisiones. Todos los hemos obtenido, personalmente no conozco a un diseñador en la tierra que no los odie, y he leído una publicación de blog después de publicar en el blog sobre cuánto chupan. Le dedica horas (o días) de su tiempo y esfuerzo para obtener una pieza de diseño perfecta.Entonces, un idiota en la reunión con el cliente - tal vez un cónyuge o pariente, o simplemente un lacayo que no sabe nada sobre diseño - se empantana con una opinión insípida que su cliente toma en serio, ¡y bam! Es, literal

(Consejos de tecnología y diseño)