Como Fazer um UPDATE em Drag-Drop

fehhL · Outubro 17, 2017

Eu tenho que fazer um sistema usando drag-drop, e estou com muitaaa dificuldade de bolar uma forma para fazer um update para mudar o status da tarefa quando a div muda de uma coluna pra outra. Por exemplo: Mudar a tarefa da tabela 'Fazer'(status=1) para 'Fazendo'(status=2). Assim quando dar refresh na página a div continue na tabela onde foi arrastada, sem voltar para a que estava antes de ser movida.

Alguém pode me ajudar a resolver esse problema?

Página index.php

<?php
require_once "Classes/BancoDAO.php";

 $sqlFazer = "SELECT * FROM tarefas where status_TAREFA = '1' ";

$rsFazer = mysqli_query($conn, $sqlFazer);

$tarefasFazer = mysqli_fetch_all($rsFazer, MYSQLI_ASSOC);



$sqlFazendo = "SELECT * FROM tarefas where status_TAREFA = '2'";

$rsFazendo = mysqli_query($conn, $sqlFazendo);

$tarefasFazendo = mysqli_fetch_all($rsFazendo, MYSQLI_ASSOC);




$sqlFeito = "SELECT * FROM tarefas where status_TAREFA = '3'";

$rsFeito = mysqli_query($conn, $sqlFeito);


$tarefasFeito = mysqli_fetch_all($rsFeito, MYSQLI_ASSOC);



mysqli_free_result($rsFeito);
mysqli_free_result($rsFazendo);
mysqli_free_result($rsFazer);

mysqli_close($conn);
?>


<html >
<head>
    <meta charset="UTF-8">
    <title>Order</title>

    <style> <?php include 'css/style.css'; ?></style>


</head>

<body>

    <div class="drag-container">
        <ul class="drag-list">





            <!PRIMIERA TABELAAA!>
            <li class="drag-column drag-column-on-hold">

                <span class="drag-column-header">
                    <h2>Fazer</h2>
                </span>

                <ul class="drag-inner-list" id="1">

<?php foreach ($tarefasFazer as $key => $item) { ?>

<div class="drag-item1" data-itemid="<?php echo $item['codigo_TAREFA'] ?>" >

 <p><strong><?php echo $item['nome_TAREFA'] ?></strong></p>
<hr>
<p><?php echo $item['descricao_TAREFA'] ?></p>
 <p><?php echo $item['status_TAREFA'] ?></p>
<hr><hr>

</div>

<?php } ?> 

 </ul><!FECHANDO O PHP DAS TAREFAS!>
</li><!FECHANDO PRIMEIRA TABELA!>



                  <!SEGUNDA TABELAAA!>
            <li class="drag-column drag-column-in-progress">

                <span class="drag-column-header">
                    <h2>Fazendo</h2>
                </span>

                <ul  id="2" class="drag-inner-list">

<?php foreach ($tarefasFazendo as $key => $citem) { ?>

<div class="drag-item2"  data-itemid="<?php echo $citem['codigo_TAREFA'] ?>">

<p><strong><?php echo $citem['nome_TAREFA'] ?></strong></p>
  <hr>
<p><?php echo $citem['descricao_TAREFA'] ?></p>
<p><?php echo $citem['status_TAREFA'] ?></p>
<hr><hr>

</div>

<?php } 

?>



</ul><!FECHANDO O PHP DAS TAREFAS!>
</li><!FECHANDO A SEGUNDA TABELAA!>




                      <!TERCEIRA TABELAAAA!>
            <li class="drag-column drag-column-needs-review">

                <span class="drag-column-header">
                    <h2>Feito</h2>
                </span>

                <ul class="drag-inner-list" id="3">

<?php foreach ($tarefasFeito as $key => $ditem) { ?>

<div class="drag-item3"  data-itemid="<?php echo $ditem['codigo_TAREFA'] ?>">

<p><strong><?php echo $ditem['nome_TAREFA'] ?></strong></p>
<hr>
<p><?php echo $ditem['descricao_TAREFA'] ?></p>
<p><?php echo $ditem['status_TAREFA'] ?></p>
<hr><hr>

</div>

<?php } ?>

</ul><!FECHANDO O PHP DAS TAREFAS!>
</li><!FECHANDO A TERCEIRA TABELAAA!>

        </ul><!fechando o negocio que contem todas as tres tabelas!>
    </div>


        <script src='js/funcao.js'></script>

        <script  src="js/index.js"></script>



</body>
</html>

Página index.js

dragula([
id1= document.getElementById('1'),
id2= document.getElementById('2'),
id3= document.getElementById('3'),
    //tarefa1= document.querySelector('.drag-item1')

])

.on('drag', function(el) {

// add 'is-moving' class to element being dragged
el.classList.add('is-moving');
})
 .on('dragend', function(el) {

// remove 'is-moving' class from element after dragging has stopped
el.classList.remove('is-moving');

// add the 'is-moved' class for 600ms then remove it
window.setTimeout(function() {
    el.classList.add('is-moved');


    window.setTimeout(function() {
        el.classList.remove('is-moved');
                    //chamar funçao php



    }, 600);
}, 100);
});

tentei fazer dessa maneira, mas não deu certo (não mudou nada :c )

$( function() {

$( id1 ).draggable();

$( id2 ).droppable({

  drop: function( event, ui ) {

      $(this).addClass( "ui-state-highlight" );

      var itemid = ui.draggable.attr('data-itemid')

      $.ajax({
         method: "POST",

         url: "UpdateTarefa.php",
         data:{'codigo_TAREFA': itemid}, 
      }).done(function( data ) {
         var result = $.parseJSON(data);

       });
     }
  });
  });

Entrar

Como Fazer um UPDATE em Drag-Drop

Pergunta

fehhL

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades