Collect information after drag and drop

[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.

Edited March 15, 2013 by stess29

[justsomeguy]

One way to do that would probably be to get all images on the page and then loop through them looking for which images are draggable. For each draggable image you can get its ID, and check its parent to see the ID of the div that it's in.

var images = document.getElementsByTagName('img'), i, imgId, divId;for (i = 0; i < images.length; i++){  if (images[i].getAttribute('draggable'))  {    imgId = images[i].id;    divId = images[i].parentNode.id;    alert('image ' + imgId + ' is in div ' + divId);  }}