0

 WP0027

HTML Drag and Drop - Simples e com update de Banco de Dados


 Assista Agora totalmente grátis
2  
 Autor: Alex Rosa

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

Conteúdo Extra
Código

Conteúdo Extra

Javascript: Drag and Drop Effect 

<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 

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

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

Javascript: POST to Update DB 

<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 

<?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";
     }
}
?>

Recomendados para você