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.


Logo abaixo estão os códigos utilizados neste exemplo.

Acesse também o canal do Youtube e veja outros vídeos como este https://www.youtube.com/channel/UCxtCypUpSFLMQBwT83WrcdA

Javascript: Drag and Drop Effect

Aqui você pode ver as funções javascript utilizadas para o Drag and Drop:

<script>
function allowDrop(ev) {
  ev.preventDefault();
}
function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>

HTML: Drag and Drop Events

Os eventos HTML chamando as funções Javascript

<div id="drop1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

<div id="drag1" draggable="true" ondragstart="drag(event)">

Javascript: POST to Update DB

Aqui a função javascript utilizadas para o realizar o POST de atualização do Banco de Dados:

<script>
function setReportsToTask(){
  var lista = [];
  $("#destinationFields").find("div").each(function(){
    lista.push(this.id); });
   
    $.post("updateTaskReport.php",
      {
      task:"SEU_TASK_ID",
      reports:lista
      },

      function(data){
        if(data == 1){
           alert('Sucesso');
        }else{
            alert('ERROR: '+data);
        }
      }); 
}
</script>

PHP: Update DB

Agora a função PHP que efetivamente grava os dados do DB.

<?php
function setReportsTasks($task, $reports) {
     $conn = $this->connect();
     if($reports){
         $task = addslashes($task);
            
         $sql = "DELETE FROM taskreport WHERE TaskID = :task";
         $stmt = $conn->prepare($sql);
         $stmt->bindValue(':task', $task);
         $stmt->execute();
            
         foreach ($reports as $report){
            $report = addslashes($report);
            $sql = "INSERT INTO taskreport (TaskID, RptID) VALUES(:task , :report)";
            $stmt = $conn->prepare($sql);
            $stmt->bindValue(':task', $task);
            $stmt->bindValue(':report', $report);
            $stmt->execute();
         }
         return 1;

     }else{
         return "erro";
     }
}
?>

Deixe seu comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *