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

Question

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

Navigation

#1 by (1 votes)

1

I made a function that throws an image in the div conteudo-img when double-clicking. But she plays the image in a sequence of the div and would like it to stay in predefined places ...
For example, the first position [0] will be x = 142 y = 245, when you double-click the image again, the counter will increase by inserting the image at position [1] which equals ax = 195 and y = 145. > How can I insert an image into a div with the already predefined 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><divid="conteudo-img" onclick="teste(event)"> </div>
</body>
</html>

javascript html5

asked by anonymous 13.12.2017 / 13:10

1 answer

JavaScript function not working correctly How to know the dynamically created textbox id?

score 1 · Accepted Answer

More or less like this? If it is not what you are 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><divid="conteudo-img" onclick="teste(event)"> </div>
</body>
</html>