如何使此拖放式
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 将拒绝工作,直到你重新加载。
我正在尝试使表单元素可拖放,但我做不到。有任何想法吗?我试图让它能够被放入另一个元素中。
表单元素的代码如下:
<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 将拒绝工作,直到你重新加载。