Instale um sistema simples de drag and drop na sua aplicação com o Dragula


Dragula

Sistemas de drag and drop estão por toda a web. Dos anexos no Gmail às caixas de status do Facebook, essas ferramentas facilitam a vida do usuário e poupam muitos cliques. Pensando nisso, um desenvolvedor argentino criou um sistema de fácil implementação para o desenvolvedor chamado Dragula.

É possível instalar a library via npm ou bower:

npm install dragula —sav

bower install dragula.js —save

O Dragula tem o código aberto no GitHub, e todo o manual de uso pode ser encontrado em sua página no repositório. Ele permite que o usuário arraste um elemento que esteja em um container até uma outra área delimitada da aplicação. Caso isso não ocorra, o evento é cancelado.

Abaixo, o exemplo demonstra como levar elementos da esquerda para a direita e vice-versa:

dragula([left, right]);

Objetos options também podem ser usados para definir o comportamento de um determinado elemento no container. Com options.copy, por exemplo, ele é copiado em vez de movido. Já o options.direction coloca o item próximo ao local em que o ponteiro do mouse se encontrava quando ele foi liberado.

Saiba mais sobre o Dragula no site do projeto