如何允許使用html5在多個div中拖放

-1

正在嘗試使用html5構建窗體..我有一個div，其中包含字段列表和另一個div，我可以將我的字段構建爲窗體。文本名稱相應的文本字段和標籤將下降到div ..但我想創建兩個div，我可以把我的領域在任何兩個div所以任何一個可以告訴如何做到這一點目前我使用這個代碼正在工作只有一個格如何允許使用html5在多個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>

來源

2014-02-06 meena

-1

傳遞div的id以及放置函數。

和

function drop(ev,did) 
{ 

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

var output=document.getElementById(did); 
}

你將GE的結果...

來源

2014-02-06 10:35:07 SUGU

如何允許使用html5在多個div中拖放

回答

相關問題