Adicionar Drag & Drop ao site facilmente com Dragula
Procurando por uma biblioteca livre para lidar com recursos de arrastar e soltar? Então Dragula é o único recurso que você precisará.
Este script gratuito permite que você adicionar recursos de arrastar e soltar para qualquer elemento na sua página. Isso inclui suporte para as estruturas React & AngularJS, juntamente com o JavaScript vanilla.
Dragula é super fácil de configurar e vem com um monte de gatilhos personalizados para comportamentos do usuário. Isso significa que você pode disparar suas próprias funções depois que o usuário arrasta um item, clica em um item ou reorganiza qualquer parte da página.
Se você der uma olhada na demonstração ao vivo, você encontrará alguns trechos de código, junto com amostras utilizáveis.
A configuração do Dragula requer apenas um único arquivo JavaScript para fazê-lo funcionar. Embora as opções extras possam ser um pouco confusas.
Por exemplo, digamos que você tenha dois contêineres, #esquerda e #certo, que você deseja oferecer suporte a itens arrastáveis. Você precisará adicionar manualmente esses contêineres à função Dragula para apoiar os métodos de arrastar e soltar.
Se você não tem uma sólida compreensão dos fundamentos do desenvolvimento de front-end, então você terá dificuldades para usar o Dragula. Mas o repositório do GitHub tem bastante ótimos exemplos que você pode seguir junto com e até mesmo trechos de código que você pode copiar.
Veja uma amostra dos documentos do GitHub sobre como segmentar os dois contêineres (esquerdo e direito):
dragula ([document.querySelector ('# left'), document.querySelector ('# right')]); Observe se você olhar mais na página do GitHub que você encontrará uma lista enorme de opções você pode passar para esta função.
Você pode escolher se copiar ou mover itens, qual (is) contêiner (es) suportam os itens arrastados e até mesmo funções de callback que funcionam através de diferentes comportamentos do usuário, tais como:
- Pairando sobre um contêiner
- Clique inicial e arraste o evento
- Evento de queda
- Soltando um elemento fora dos limites
- Clonando um elemento / contêiner arrastando
Esta biblioteca vai levar algum trabalho inicial mas se você estiver familiarizado com JavaScript, deve ser um acéfalo.
Olhe a página de demonstração para Veja como funciona e para obter algumas idéias de amostra de código. Dragula é uma biblioteca enorme e é provavelmente o melhor script de código aberto para lidar com arrastar e soltar, com a maior variedade de personalização.
