Question

我正在尝试使用html5构建表单..我有一个div包含字段列表和另一个div我可以把我的字段构建表单..删除文本名称相应的文本字段和标签将下垂在div ..但我想创建两个div，我可以把我的字段放在任何两个div中，所以任何人都可以告诉如何做到这一点，目前我正在使用这个仅适用于一个div的代码

<html>
<head>
<title>Drag and Drop</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
 <script type="text/javascript">
  var i=0;
 function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
    i++;
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
//alert(data);
 var field_type=field_set(data);

   var output=document.getElementById("div1");

         if(!document.getElementById('drag'+i))
        {
            var ele = document.createElement("div");
            ele.setAttribute("id","drag"+i);
            ele.setAttribute("class","inner");
            //var val=field_type;
            //alert(val);
            ele.innerHTML=field_type;
            output.appendChild(ele);

        }

}
function field_set(data)
{
        if(data=='name')
    {
        var Label=prompt("Please enter Field Name","");
        if(Label=='')
        {
           var val='';
        }
        else
        {
        var field=Label+"<input type='text' id='text1' class='text1'>";
      // alert('field');
        }
    }
    if(data=='pass')
    {
        var field="<input type='password' id='text1' class='text1'>";
    }
    return field;
}

 </script>
</head>
<div id="container">
    <h3 align="center">Form Builder</h3>
        <div id="left">
            <div id="l_content">
                <h3>Field Elements</h3>
                <div id="name" draggable="true" ondragstart="drag(event)" class="drag1">
                    <label id="name1">Name</label>
                    <!--<input type="text" id="text1" class="text1">-->
                </div>
                <div id="pass" class="drag1" draggable="true" ondragstart="drag(event)">
                    <label>Password</label>
                   <!-- <input type="password" id="text2" class="text1">-->
                </div>
            </div>
        </div>
        <div id="right">
            <h3>Form</h3>
            <div id="div1" class="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
            </div>

            </div>
            <div id="btn"><input type="submit" value="Create Form" ></div>
        </div>
</div>

</html>

Answer 1

将div的id与drop函数一起传递。

和

function drop(ev,did)
{

//var output=document.getElementById("div1");

var output=document.getElementById(did);
}

你会得到结果......

如何使用html5允许拖放多个div

1 个答案: