La semana pasada creé un par de directivas para drag&drop en Angular por dos motivos:

  • Pienso que resuelve un caso de uso bastante útil, aunque muy general.
  • Quería ver cómo funciona la subida a npm.

La directiva se llama asb-dnd. Expone dos directivas: asbDraggable y asbDroppable. Se puede ver un ejemplo funcionando en este plunkr.

Las directivas se basan en el uso de HostListeners para capturar los eventos de arrastrar y/o soltar. Asocian una serie de información al objeto dataTransfer del evento para poder compartir información entre el arrastrable y el lugar donde lo depositamos.

Para más información de la librería, el README del proyecto es un poco más extenso.

A la hora de subir a npm, los tres comandos básicos que debemos conocer son:

  • npm adduser nos permite darnos de alta en npm para poder subir nuestro código.
  • npm version (major|minor|patch) nos permite actualizar la versión de nuestro paquete de acuerdo a la especificación semver.
  • Por último, con npm publish realizamos la publicación de nuestro código en npm.

El código fuente del proyecto se encuentra, cómo no, en GitHub.

Anuncios