Формирование данных формы посредством drag&drop в html5

07.10.19 12:20:40 07.10.19 12:20:40 99

Источник: //ru.stackoverflow.com/questions/1029258/Формирование-данных-формы-посредством-dragdrop-в-html5/

<!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>