🖖 Inicio

SERVICIOS

Salir

nochedía

Drag-n-drop con react-beautiful-dnd

200 palabras
1 minutos
May 17, 2020
cursosgatsbyreact-beautiful-dnd

Prólogo

La técnica Drag-n-Drop consiste en hacer lo que hacemos siempre con el móvil, esto es, mover cosas con el dedo

Y lo suyo es moverlas de un sitio a otro, y que haya una respuesta visual que permita operar de forma intuitiva

El funcionamiento no es complicado y se reduce todo a definir qué objetos son draggables y qué zonas son containers o droppable

Y a partir de aquí ya podemos definir los efectos, qué pasa cuando haces esto y aquello, etc etc

Pero éste no es un curso para hacer drag-n-drop con vainilla JavaScript, sino que se trata de utilizar la librería react-beautiful-dnd para

  • facilitarnos la vida

  • acelerarnos la vida

El principal argumento para utilizar esta librería es que la funcionalidad que me interesa es la de tener un comportamiento trello-like, refiriéndose al website trello.com, un lugar que nos permite organizar nuestras ideas siguiendo un sistema de cartas que podemos crear, eliminar y mover en distintas listas de tareas

Y esta librería está especialmente optimizada para este user-case

  • Porque así lo dicen
  • Porque la librería forma parte del ecosistema de Atlassian, la compañía que compró Trello y que liberó esta librería

Por lo tanto, en este curso implementaremos una lista básica utilizando esta librería y todo ello formando parte de un sitio Gatsby, al que ya tienes visto de cursos anteriores

Como sea, vamos allá

Empezar
  1. Crear un website de Gatsby
    • Crear los elementos
      • Drag and Drop
        • Reordenando la lista

          Newsletter de kuworking, un correo de tanto en cuanto

          Quizá te interese

          Privacidad
          by kuworking.com
          [ 2020 >> kuworking ]