2013-10-03 2 views
0
<!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

+0

использовать Марка «кратному» в ваших дивы. Сделаю. –

ответ

0
<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> 

Используя эти чуть можно добавить несколько изображений в сНу теге

Смежные вопросы