如何使此拖放式

How to Make This Drag n Droppable

我正在尝试使表单元素可拖放,但我做不到。有任何想法吗?我试图让它能够被放入另一个元素中。

表单元素的代码如下:

<div class="text1">
    <form>
        Item Name:<br>
        <input type="text" name="fname">
    </form>
</div>

下面的代码基于 HTML5 拖放 API。当你把它放到一个盒子里时,它会执行一个函数,把它放到那里。

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;
  /* not required, just shows hitboxes */
  border: 2px solid lime;
}

#div2 {
  width: 350px;
  height: 70px;
  padding: 10px;
  /* not required, just shows hitboxes */
  border: 2px solid magenta;
}

#drag1 {
  /* not required, just shows hitboxes */
  display: inline-block;
  border: 2px solid cyan;
}
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<div class="text1" id="drag1" draggable="true" ondragstart="drag(event)">
    <form>
        Item Name:<br>
        <input type="text" name="fname">
    </form>
</div>
<br>
<div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

我添加了 ID,因为它们是工作所必需的。

此代码添加了两个框,您可以将元素拖放到其中。也可以放在页面之间。

由于表单输入也被归类为可以放入东西的东西,我不建议拖放带有输入的表单。如果有人 miss-clicks,你会得到一个层次结构错误,并且 DnD 将拒绝工作,直到你重新加载。

更多信息在这些页面上: MDN webdev