{RESOLVED} Drag and drop multiple images

Code to drag'n'drop multiple images as a group

Page 1 of 1

2 Replies - 3589 Views - Last Post: 05 March 2009 - 01:52 PM

#1 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 793
  • View blog
  • Posts: 1,679
  • Joined: 30-January 09

{RESOLVED} Drag and drop multiple images

Posted 04 March 2009 - 02:34 PM

Hi all,

I'm reasonably new to HTML, JS et al, but have been working with VBA for many years and consider myself an almost expert. I'm having a little trouble with some tricks in JS though, and I imagine this will not be the first query I have for this community :)

I have found code on W3Schools to drag and drop an image on a webpage. I am currently trying to modify it so that it drags and drops multiple images at once (as a group). This is because I intend to create meta-images on my webpage from multiple .gifs and .pngs with alpha=0, and then move those images around so that they appear to be one big image.

This is the code I have that works, but only one image moves, the same image regardless of which image you click on:

<html>
<head>

  <style>
	img
	{
	position:absolute;
	}
  </style>

  <script type="text/javascript">
  document.onmousedown = coordinates;
  document.onmouseup = mouseup;

  function coordinates(e)
  {
  if (e == null) { e = window.event;}
  var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target;

  if (sender.id == "moveMe")
  {
	mouseover = true;

	pleft = parseInt(xImg[0].style.left);
	ptop = parseInt(xImg[0].style.top);

	xcoor = e.clientX;
	ycoor = e.clientY;
	document.onmousemove = moveImage;
	return false;
  }
  else { return false; }
  }

  function moveImage(e)
  {
  if (e == null) { e = window.event;}
  xImg = document.getElementsByTagName("img");

  xImg[0].style.left = pleft + e.clientX - xcoor + "px";
  xImg[0].style.top = ptop + e.clientY - ycoor + "px";

  return false;
  }

  function mouseup(e)
  {
  document.onmousemove = null;
  }
  
  </script>

</head>



<body>

  <img id="moveMe" src="smiley.gif" width="32" height="32" />
  <img id="moveMe" src="smiley.gif" width="32" height="32" />
  <img id="moveMe" src="smiley.gif" width="32" height="32" />
  <img id="moveMe" src="smiley.gif" width="32" height="32" />
  <img id="moveMe" src="smiley.gif" width="32" height="32" />

  <script type="text/javascript">
  //The movable image
  xImg = document.getElementsByTagName("img");
  //image starting location
  for (i = 0; i < xImg.length; i++)
  {
	xImg[i].style.top = (i*32) + "px";
	xImg[i].style.left = (128-i*32) + "px";
  }
  </script>

</body>



</html>


This can also be found at http://www.artofwar.cc/example.php

Now, I have tried changing pleft and ptop to arrays, with for loops around these two pieces of code, in order to try to capture all 'img' objects at once:

//In 'coordinates' function
//...
	pleft = parseInt(xImg[0].style.left);
	ptop = parseInt(xImg[0].style.top);
//...
//changed to
//...
	for (k = 0; k < xImg.length; k++) {
	pleft[k] = parseInt(xImg[k].style.left);
	ptop[k] = parseInt(xImg[k].style.top);
	}
//...
//and in 'moveImage' function
//...
  xImg[0].style.left = pleft + e.clientX - xcoor + "px";
  xImg[0].style.top = ptop + e.clientY - ycoor + "px";
//...
//changed to
//...
	for (k = 0; k < xImg.length; k++) {
	xImg[k].style.left = pleft[k] + e.clientX - xcoor + "px";
	xImg[k].style.top = ptop[k] + e.clientY - ycoor + "px";
	}



When I make these changes, the code generates errors. I'm not sure where it's going wrong as I'm new to this language. Any tips?

This post has been edited by e_i_pi: 05 March 2009 - 01:53 PM


Is This A Good Question/Topic? 0
  • +

Replies To: {RESOLVED} Drag and drop multiple images

#2 thehat  Icon User is offline

  • awake ? web();
  • member icon

Reputation: 106
  • View blog
  • Posts: 951
  • Joined: 28-February 08

Re: {RESOLVED} Drag and drop multiple images

Posted 05 March 2009 - 06:25 AM

Without looking at your second bit of code...the reason that only the first image moves, regardless of which one is clicked, is because all your images have the same id attribute set. In html, an id should be unique on the page. The code supplied is hard coded to require only that one id, and to only move the first element in the xImg array.

This moves each image separately, hopefully it'll put you on the right track:
<html>
<head>

  <style>
	img
	{
	position:absolute;
	}
  </style>

  <script type="text/javascript">
  document.onmousedown = coordinates;
  document.onmouseup = mouseup;
  
  var targ;
  

  function coordinates(e)
  {
	  if (e == null) { e = window.event;}
	  var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target;
	  
	  xImg = document.getElementsByTagName("img");
	  document.getElementById("feedback").innerHTML = sender.id;
	  for(var n=0; n < xImg.length; n++)
	  {
		  if (sender.id == xImg[n].id)
		  {
			mouseover = true;
			
			targ = n;
		
			pleft = parseInt(xImg[n].style.left);
			ptop = parseInt(xImg[n].style.top);
		
			xcoor = e.clientX;
			ycoor = e.clientY;
			document.onmousemove = moveImage;
			return false;
		  }
	  }
	  return false;
	  
  }

  function moveImage(e)
  {
  if (e == null) { e = window.event;}
  xImg = document.getElementsByTagName("img");

  xImg[targ].style.left = pleft + e.clientX - xcoor + "px";
  xImg[targ].style.top = ptop + e.clientY - ycoor + "px";

  return false;
  }

  function mouseup(e)
  {
  document.onmousemove = null;
  }
 
  </script>

</head>



Basically, what I've done is give each image a unique id. I've modified the coordinates function to loop through the xImg array looking for an image with an id that matches sender.id and update a new variable, targ, with the array index of the correct image. The moveImage function now uses the targ variable to move the correct image instead of just moving the first one in the array.
Was This Post Helpful? 0
  • +
  • -

#3 e_i_pi  Icon User is offline

  • = -1
  • member icon

Reputation: 793
  • View blog
  • Posts: 1,679
  • Joined: 30-January 09

Re: {RESOLVED} Drag and drop multiple images

Posted 05 March 2009 - 01:52 PM

Thank thehat, this got me roughly on the right track. I'm not sure what the line:
	  document.getElementById("feedback").innerHTML = sender.id;


...was for, but it generated errors, so I removed it. After a little more tweaking and fiddling round, I finally got the code doing what I wanted. Turns out I wasn't declaring arrays properly (either globally, or with case sensitivity doh).

The final product can be seen here:
http://artofwar.cc/example.php

And here's the code:
<html>
<head>

  <style>
	img
	{
	position:absolute;
	}
  </style>

  <script type="text/javascript">
  document.onmousedown = coordinates;
  document.onmouseup = mouseup;

  xImg = document.getElementsByTagName("img");
  var pleft = new Array(xImg.length);
  var ptop = new Array(xImg.length);

  function coordinates(e)
  {
	  if (e == null) { e = window.event; }
	  var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target;
	  
	  xImg = document.getElementsByTagName("img");
	  
	  for(var n=0; n < xImg.length; n++)
	  {
			pleft[n] = parseInt(xImg[n].style.left);
			ptop[n] = parseInt(xImg[n].style.top);
	  }

	  for(n=0; n < xImg.length; n++)
	  {
			xcoor = e.clientX;
			ycoor = e.clientY;
		  if (sender.id == xImg[n].id)
		  {
			mouseover = true;


			document.onmousemove = moveImage;
			return false;
		  }
	  }
	  return false;
	  
  }

  function moveImage(e)
  {
  if (e == null) { e = window.event; }
  xImg = document.getElementsByTagName("img");

  for(var k=0; k < xImg.length; k++)
  {

	xImg[k].style.left = pleft[k] + e.clientX - xcoor + "px";
	xImg[k].style.top = ptop[k] + e.clientY - ycoor + "px";
  }

  return false;
  }

  function mouseup(e)
  {
  document.onmousemove = null;
  }
  
  </script>

</head>



<body>

  <img id="moveMe1" src="smiley.gif" width="32" height="32" />
  <img id="moveMe2" src="smiley.gif" width="32" height="32" />
  <img id="moveMe3" src="smiley.gif" width="32" height="32" />
  <img id="moveMe4" src="smiley.gif" width="32" height="32" />
  <img id="moveMe5" src="smiley.gif" width="32" height="32" />

  <script type="text/javascript">
  //The movable image
  xImg = document.getElementsByTagName("img");
  //image starting location
  for (i = 0; i < xImg.length; i++)
  {
	xImg[i].style.top = (i*32) + "px";
	xImg[i].style.left = (128-i*32) + "px";
  }
  </script>

</body>



</html>

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1