主页 / 问题 / 1029258
Accepted
svmitin
Asked:2020-09-29 21:44:33 +0000 UTC2020-09-29 21:44:33 +0000 UTC

在html5中通过拖放形成表单数据

  • 772

我远非专业的 html5 用户，但需要以下内容：

  • html 页面需要两个区域。一个带有配方的组件，用户必须将这些组件拖到另一个
  • 第二个区域是一个表单，或者我不知道是什么，但它必须以某种方式将有关其内容的信息发送到服务器。第一个区域的元素可以随意放置在其中。
  • 以防万一，我将指出拖动的组件本身必须包含有关组件数量（ml，g）的信息

请告诉我如何在 html 中完成。图书馆、指南等

css3

1 个回答

  1. Best Answer
    1. DD 示例：

    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));
}
    #div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
    <html>
<head>
</head>
<body>
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<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>

    1. 在这里，您需要考虑 div 以便通过 php 等以邮件形式发送它。

    请告诉我如何在 html 中完成。图书馆、指南等

    来源：HTML5 拖放https://www.w3schools.com/html/html5_draganddrop.asp

    ===============================================

    一般来说），这是一个拐杖工人横空出世：

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

    在此处输入图像描述

    • 2

相关问题