Формирование данных формы посредством drag&drop в html5
07.10.19 12:20:40 07.10.19 12:20:40 99
Источник: //ru.stackoverflow.com/questions/1029258/Формирование-данных-формы-посредством-dragdrop-в-html5/
<![CDATA[<!DOCTYPE html>
<html lang="rus">
<meta charset="utf-8">
<head>
<script>
function allowDrop(ev) {
ev.preventDefault();
}
function drag(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));
var ddd = document.getElementById("div1").innerHTML;
document.getElementById("result").innerHTML = ddd.replace(/<[^>]*>/g, " ");
/*Или так эту функцию изобразить:
function drop(ev) {
ev.preventDefault();
var data = ev.dataTransfer.getData("text");
ev.target.appendChild(document.getElementById(data));
var nnn = document.getElementById("div1").innerText;
document.getElementById("result").innerHTML = nnn;
}
*/
}
</script>
<style>
#div1 {
width: 350px;
height: 70px;
padding: 10px;
border: 1px solid #aaaaaa;
}
</style>
</head>
<body>
<?="Отослано: ".$_POST['result']?>
<form name="forma" action="" method="post">
<textarea id="result" style="display: none" name="result"></textarea>
<input type="submit" value="Отправить">
</form>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="drag1" draggable="true" ondragstart="drag(event)" >1234567</div>
<div id="drag2" draggable="true" ondragstart="drag(event)" >ЙЦУКЕН</div>
<div id="drag3" draggable="true" ondragstart="drag(event)" >информация о количестве компонента (мл, гр)</div>
</body>
</html>
]]>
