Doubleclick by duplicating img in a div with already predefined location (?)

Asked

Viewed 35 times

1

I made a Function that plays an image in div conteudo-img double-clicking.
But she plays the image in a div sequence and would like it to be in predefined places...
For example, the first position[0] will be x=142 y=245, when double-clicking on the image again, the counter will increase by inserting the image at position[1] which is equal to x=195 and y =145.
How can I insert an image into a div with the default position? 

function teste(ev){
    ev.preventDefault();
    var x = ev.clientX;
    var y = ev.clientY;
	console.log(x + " " + y);
}
	var cont = 0;
	const images = document.getElementById('images');
	const target = document.getElementById('conteudo-img');
	images.addEventListener('dblclick', function(e) {
		var posicao = [];
		//posicao[0] = //(x = 142 e y = 245)
		//posicao[1] = //(x = 192 e y = 145)
		/*e.preventDefault();
		var x = e.clientX;
		var y = e.clientY;
		console.log(x + " " + y);*/
   	  	const image = e.target;
	  	target.appendChild(image.cloneNode());
      //...
	});
	#images {
	  float: left;
	}

	#conteudo-img {
	  width: 300px;
	  height: 300px;
	  border: 1px solid #f1f;
	  float: left;
	}
<html>
<body>
  <div id="images">
    <img src="https://orig00.deviantart.net/d61c/f/2015/256/c/7/dipper_ice_cream_splat_icon___free_to_use_by_icelemontea83-d99f4z7.gif"><br>
  </div>
  <div id="conteudo-img" onclick="teste(event)"> </div>
</body>
</html>

javascript html5

1 answer

1


Kind of like this? If it’s not what you’re looking for I’ll edit the answer.

  var cont = 0;
  const images = document.getElementById('images');
  const target = document.getElementById('conteudo-img');
  var posicao = [];
      posicao[0] = {x : "142px", y : "245px"};
      posicao[1] = {x : "192px", y : "145px"};
	
  images.addEventListener('dblclick', function(e) {    
    const image = e.target;
    if(cont < posicao.length){ 
      var clone = target.appendChild(image.cloneNode(true));      
          clone.style= "position:absolute;top:"+posicao[cont].y+";left:"+posicao[cont].y+";";
      cont++;
    }
  });
#images {
	  float: left;
	}

	#conteudo-img {
	  width: 300px;
	  height: 300px;
	  border: 1px solid #f1f;
	  float: left;
	}
<html>
<body>
  <div id="images">
    <img src="https://orig00.deviantart.net/d61c/f/2015/256/c/7/dipper_ice_cream_splat_icon___free_to_use_by_icelemontea83-d99f4z7.gif"><br>
  </div>
  <div id="conteudo-img" onclick="teste(event)"> </div>
</body>
</html>

  • Just like that !!! Thanks for the help @Leandro !

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.