1

Fiz uma function que joga uma imagem na div conteudo-img ao clicar duas vezes.
Porém ela joga a imagem em uma sequência da div e gostaria que ela ficasse em lugares já predefinidos...
Por exemplo, a primeira posição[0] será x=142 y=245, ao clicar duas vezes na imagem de novo, o contador irá aumentar inserindo a imagem na posição[1] que é igual a x=195 e y =145.
Como posso inserir uma imagem em uma div com a posição já predefinida?

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>

1 Resposta 1

1

Mais ou menos assim? Se não for o que você procura eu edito a resposta.

  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>

1
  • Exatamente assim !!! Obrigado pela ajuda @Leandro !
    – Sora
    13/12/2017 às 13:41

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .