I want to do the following. In 02 columns of Bootstrap, in one of them have the information that the user would like to include in the form and the other a field for him to drag this information. Ex.:
<div class="col-md-6">
Nome
E-mail
Assunto
Telefone
Celular
...
</div>
<div class="col-md-6">
Aqui ficaria os campos arrastados pelo usuário da coluna anterior
</div>
And by dragging to this div, automatically save to the database.
AccordingtoW3Schoolstheinitialstepwouldbeasbelow:
<!DOCTYPEHTML><html><head><script>functionallowDrop(ev){ev.preventDefault();}functiondrag(ev){ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="img_logo.gif" draggable="true"
ondragstart="drag(event)" width="336" height="69">
</body>
</html>
But how could I apply this example to my needs?
I thought of including some lines, such as:
var ordem = $(this).sortable("serialize");
$.post("cadastrar-formulario.php", ordem, function (retorno) {
......
}
And in PHP:
$array = $_POST['Campos'];
$ordem = 1;
foreach($array as $id){
mysqli_query($conexao,"UPDATE formulario SET ordem = '".$ordem."' WHERE id = '".$id."'");
$ordem++;
}