Jump to content

Collect information after drag and drop


Recommended Posts

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 by stess29
Link to comment
Share on other sites

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);  }}

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...