在draganddrop中添加多個圖像

<!DOCTYPE HTML> 
<html> 
<head> 
<style type="text/css"> 
#divdrag1,#divdrag2 
{float:left; width:100px; height:200px; margin:10px;padding:10px;border:1px solid #aaaaaa;} 

#div2,#div3 
{float:left; width:200px; height:100px; margin:10px;padding:10px;border:1px solid #aaaaaa;} 


</style> 
<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)); 
document.getElementById(data).width="200" 
document.getElementById(data).height="100" 
} 
</script> 
</head> 
<body> 
<form id="f1" name="form1" method="post"> 



    <div name="answer"> 
     <div id="divdrag1" ondrop="drop(event)" ondragover="allowDrop(event)" > 
      <img src="smiley.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"> 
     </div> 
     <div id="divdrag2" ondrop="drop(event)" ondragover="allowDrop(event)" > 
      <img src="pic1.jpg" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31"> 
     </div> 

    </div> 

    <div> 
     <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
     <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"></div> 
    </div> 




</form> 
</body> 
</html>

嘿，我需要添加多個圖像單div（div name =「answer」）在draganddrop控制我試過，但它沒來。每個圖像顯示在單獨的div中。當我拖動它也沒有正確顯示時，請告訴我我做錯了什麼。哪一個我必須糾正。請指引我的朋友在draganddrop中添加多個圖像

來源

2013-10-03 Bhargavi

。利用「多」的。會做。 –

<div id="divdrag1" ondragover="allowDrop(event)" > 
      <ul type="none"> 
       <li><img src="smiley.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31" align="left"> </li> 
       <li><img src="pic1.jpg" draggable="true" ondragstart="drag(event)" id="drag2" width="88" height="31"> </li> 
      </ul> 

     </div>

使用這些點點，我們可以在div標籤在你的div添加多張圖片

來源

2013-10-04 05:04:17 Bhargavi

在draganddrop中添加多個圖像

回答

相關問題