stess29

Hello everyone, I know a little Javascript and I have a problem with a function of drag and drop. Let me explain it. I have a page where I have a sytem of drag and drop with images. Each image are in div and I have to put them in an other div. After putting all my images on a div, I have a button (like a form) and when I click on this button, I want to collect information. For example, I want to know in each div my first image is. I want the same for the second image and the other ones. Here is my javascript code :

<script>    function allowDrop(ev){	ev.preventDefault();   }   function drag(ev){	ev.dataTransfer.effectAllowed='move';	ev.dataTransfer.setData("Text", ev.target.id);   }   function drop(ev){	ev.preventDefault();	var data=ev.dataTransfer.getData("Text");	previousParent = document.getElementById(data).parentNode;	if (ev.target.nodeName=="IMG")	{	 // here nb parentNode.childNodes !=0 !	 for (i=0; i<ev.target.parentNode.childNodes.length; i++)	 {	  var node = ev.target.parentNode.childNodes[i];	  if (node.nodeName=="IMG")	  {	   ev.target.parentNode.insertBefore(document.getElementById(data), node);	   ev.target.parentNode.removeChild(node);	   if (!RegExp("fake").test(node.id))	   {		previousParent.appendChild(node);	  	   }	   break;	  }	 }	} else {	 // check if div is not empty	 for (i=0; i<ev.target.childNodes.length; i++)	 {	  var node = ev.target.childNodes[i];	  if (node.nodeName=="IMG")	  {	   ev.target.insertBefore(document.getElementById(data), node);	   ev.target.removeChild(node);	   alert (node.id+":"+RegExp("fake").test(node.id));	   if (!RegExp("fake").test(node.id))	   {		previousParent.appendChild(node);	   }	   break;	  }	 }	 // div is empty, add drag	 ev.target.appendChild(document.getElementById(data));	}   }  </script>

The divs where my image are at first :

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">   <img src="img/d&d/model1_image1.gif" draggable="true" ondragstart="drag(event)" id="drag1"></div><div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)">   <img src="img/d&d/model1_image2.gif" draggable="true" ondragstart="drag(event)" id="drag2"></div><div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)">   <img src="img/d&d/model1_image3.gif" draggable="true" ondragstart="drag(event)" id="drag3"></div><div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)">   <img src="img/d&d/model1_image4.gif" draggable="true" ondragstart="drag(event)" id="drag4"></div>

And the divs where my images are after the drag and drop :

<div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"></div><div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)"></div><div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)"></div><div id="div8" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

Is there a solution to my problem ? Thank you in advance for your answers.