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)