fehhL
-
Total de itens
1 -
Registro em
-
Última visita
Sobre fehhL
fehhL's Achievements
0
Reputação
-
Como Fazer um UPDATE em Drag-Drop
uma questão postou fehhL Repositório de Scripts - Ajax, JS, XML, DOM
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); }); } }); });