Javascript function triggered after clicking div and save data in the database

Asked

Viewed 461 times

1

I wanted to know if you can put a javascript function after clicking and dragging a div (better still: after "drop" the div). I intend to make a code so that every time I move the div to a table happens an UPDATE (but I can’t imagine how to do).

<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');

P.S.: I haven’t finished the php and html programming of this page yet (to make it more beautiful and functional)

php javascript html mysqli
  • 1

    I think you should ask a concise question, like, just as an example: "I have 2 Ivs, right next to each other. I want to drag the one on the left and drop it on the one on the right. How do I detect that the div I dragged was released in the right div and send information (inform what information you want to send) to the database?"... and show the relevant code of it all, so that people can play the HTML and javascript part.

  • 1

    The part of PHP does not matter in this case, because then you do the information sent as you want, is another department.

  • I copied your code and show it to me in the browser: https://i.stack.Imgur.com/Tgyfl.jpg

  • for you to see that it’s complicated, what I have to do with it?

  • 1

    I could see here what you want to drag. Just call inside the function .on('dragend', what you want to do.

  • Oops! So, within the function .on('dragend', function(el) { you put any function you want to call after an element has been dragged.

  • What information do you want to send to the bank?

Show 2 more comments

1 answer

0


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

Include an Ajax function within 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 table where the element was dragged.

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

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

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

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

The Javascript/jQuery code would look 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');
});
  • 1

    @J.Jones I updated the answer and put in Ajax the capture of the text of the div.

  • @J.Jones I really don’t know what this error is. It appeared after you put my Ajax code?

  • @J.Jones So it’s another thing from your code.

Browser other questions tagged php javascript html mysqli

You are not signed in. Login or sign up in order to post.