<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.css" >
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container row">
<div id="divUno" class="col-md-6" style="border:1px solid #000;height:500px;">
</div>
<div id="divDos" class="col-md-6">
<?php
$arrAux = [1=>'Lo que el viento se llevó',2=>'Rebeca',3=>'Qué verde era mi valle',4=>'La señora Miniver',5=>'Casablanca'];
foreach ($arrAux as $clave=>$valor) { ?>
<div class="panel panel-default esDivDos" id="<?=$clave;?>">
<div class="panel-body">
<?=$valor;?>
</div>
</div>
<?php
}
?>
</div>
</div>
<button id="guardarTodo">GUARDAR TODO</button>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/dragula/3.7.2/dragula.min.js'></script>
<script>
dragula([
document.getElementById('divUno'),
document.getElementById('divDos'),
], {
moves: function (el, container, handle) {
// return handle.classList.contains('glyphicon-move'); // si tiene esa clase permite el movimiento
return handle;
}
}).on('drop', function (el, target, source, sibling) {
// console.log("se soltó correctamente");
}).on('drag', function (el, target, source, sibling) {
console.log("se mueve correctamente");
elAux = $(el).attr("id");
// console.log(elAux);
});
$("#guardarTodo").click(function() {
$("#divUno .panel-default").each(function(){
console.log($(this).attr("id"));
// y con esto mandar un ajax para guardar en BD el orden o lo q se quiera hacer
});
});
</script>
</body>
</html>
Más información en: https://bevacqua.github.io/dragula/
No hay comentarios:
Publicar un comentario