Function in JavaScript triggered after clicking div and saving data in the database

Question

Function in JavaScript triggered after clicking div and saving data in the database

Navigation

#1 by (0 votes)

1

I would like to know if you have a javascript function after clicking and dragging a div (better still: after "drop" the div). I want to make a code so that every time I move the div to a table an UPDATE happens (but I can not imagine how).

<div class="drag-container">
<ul class="drag-list">
    <li class="drag-column drag-column-on-hold">
        <span class="drag-column-header">
            <h2>Fazer</h2>

        </span>

        <div class="drag-options" id="options1"></div>

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

            <li class="drag-item"><a href="" >

  Je    </a></li><br>
            </ul>
    </li>
    <li class="drag-column drag-column-in-progress">
        <span class="drag-column-header">
            <h2>Fazendo</h2>

        </span>
        <div class="drag-options" id="options2"></div>
        <ul class="drag-inner-list" id="2">
            <li class="drag-item"></li>
            <li class="drag-item"></li>
            <li class="drag-item"></li>
        </ul>
    </li>

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

        </span>
        <div class="drag-options" id="options4"></div>
        <ul class="drag-inner-list" id="4">
            <li class="drag-item"></li>
            <li class="drag-item"></li>
        </ul>
    </li>
   </ul>
  </div>

<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/45226/dragula.min.js'></script>

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

JS

 dragula([
document.getElementById('1'),
document.getElementById('2'),
document.getElementById('3'),
document.getElementById('4'),
document.getElementById('5')
])

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

// add 'is-moving' 
el.classList.add('is-moving');
})
.on('dragend', function(el) {

// remove 'is-moving'
el.classList.remove('is-moving');

// add 'is-moved' class por 600ms 
window.setTimeout(function() {
    el.classList.add('is-moved');
    window.setTimeout(function() {
        el.classList.remove('is-moved');
    }, 600);
}, 100);
});


 var createOptions = (function() {
var dragOptions = document.querySelectorAll('.drag-options');

Q: I have not yet finished the php and html programming of this page (to look more beautiful and functional)

php javascript html mysqli

asked by anonymous 10.12.2017 / 04:26

1 answer

Doubt Laravel application [duplicate] Apache does not recognize virtual directory

score 0 · Accepted Answer

Sending id of the table to where the element was dragged and the element text, via Ajax

Include an Ajax function inside the function that detects when the element is dragged and dropped:

.on('dragend', function(el) {
   var valor_id = $(el).closest('ul').attr('id');
   var texto = $(el).text().trim();
   $.ajax({
      url: 'processa.php',
      type: 'POST',
      data: {dado: valor_id, texto: texto},
      success: function(result) {
           console.log(result); // aqui eu exibo no console o resultado do Ajax
       }
   });
});

Where valor_id is the id of the table where the element was dragged.

processa.php is the PHP page where the id will be sent by the dado variable.

In the PHP page, you get the value sent in dado using the following code:

<?php
$dado = $_POST['dado'];
?>

With this information captured in the PHP page, you use it to send to the database, either to INSERT or UPDATE.

The JavaScript / jQuery code looks like this:

dragula([
   document.getElementById('1'),
   document.getElementById('2'),
   document.getElementById('3'),
   document.getElementById('4'),
   document.getElementById('5')
])
.on('drag', function(el) {

   // add 'is-moving' 
   el.classList.add('is-moving');
})
.on('dragend', function(el) {

   var valor_id = $(el).closest('ul').attr('id');
   var texto = $(el).text().trim();
   $.ajax({
      url: 'processa.php',
      type: 'POST',
      data: {dado: valor_id, texto: texto},
      success: function(result) {
         console.log(result);
      }
   });

   // remove 'is-moving'
   el.classList.remove('is-moving');

   // add 'is-moved' class por 600ms 
   window.setTimeout(function() {
      el.classList.add('is-moved');
      window.setTimeout(function() {
         el.classList.remove('is-moved');
      }, 600);
   }, 100);
});

var createOptions = (function() {
   var dragOptions = document.querySelectorAll('.drag-options');
});