Create forms using drag-and-drop with PHP and Mysql

0

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++;
}
    
asked by anonymous 20.10.2018 / 13:56

0 answers