Um passo a passo completo com todo o código disponível para implementar recurso de arrasta e solta, o famoso Drag and Drop em uma aplicação sem a dependência de plugins, apenas com o puro HTML e Javascript.

Muitas vezes no nosso dev diário passamos por necessidades específicas, como é o caso desse artigo.

Em uma tarefa de frontend eu precisava implementar o recurso Drag and Drop para relacionar dados em uma aplicação, com um template pronto.

---

Minha primeira ideia: Plugin JQuery.

Por já ter implementado diversos recursos Jquery como Jquery Sortable, ou até o MultiUpload com JQuery, essa foi a primeira ideia. Tentei diversas opções de plugin Jquery que não funcionaram por compatibilidade da versão JQuery exigida pelos plugins e da versão de bibliotecas presentes no template.

Bom, como eu já passei por isso algumas vezes nesses anos de Dev, busquei por uma opção, mais direta em que eu pudesse controlar o Drag and Drop, ou seja, onde eu mesmo incluísse o recurso de arrasta e solta nos meus objetos, sem interferir no funcionamento da aplicação.

---

A Solução: HTML Drag and Drop

Encontrei uma opção onde eu poderia manipular diretamente os eventos “ondragstart”, “ondrop” e “ondropover” dos objetos HTML e assim foi só criar as funções Javascript para executar o efeito de arraste e pronto, o recursos estava funcionando.

Mas eu ainda não havia acabado, pois no eu caso, o arrasta e solta não era uma via de mão única, eu precisava que os objetos fossem arrastados tanto para um bloco como para o outro.

Então um ajuste nas funções Javascript e pronto, estava tudo funcionando.

Entenda como foi implementar o Drag and Drop, assistindo ao vídeo com o passo a passo.

---

Os Códigos utilizados neste exemplo estão disponíveis na Warsplay:
https://warsplay.com/video/NDE3MjQ

Veja muitos outros vídeos como este em
https://warsplay.com