Как сделать что бы изображение всегда появлялось под мышкой?

144

14 января 2020, 21:10

Как сделать что бы при клике изображение всегда появлялось под мышкой в заданном блоке?

document.getElementById('get').onclick = function(e) { 
  var x = e.offsetX == undefined ? e.layerX : e.offsetX; 
  var y = e.offsetY == undefined ? e.layerY : e.offsetY; 
  var img = document.createElement('img'); 
  img.src = 'https://avatanplus.com/files/resources/original/57d55366a6bde157194dc91b.png'; 
  img.id = 'go'; 
  img.style.width = "20px"; 
  img.style.height = "20px"; 
  img.style.top = "" + y + "px"; 
  img.style.left = "" + x + "px"; 
  img.style.position = "relative"; 
  get.appendChild(img); 
}; 
 
function sty() { 
  var elem = document.getElementById('get'); 
  while (elem.firstChild) { 
    elem.removeChild(elem.firstChild); 
  } 
}

<div id="1ro" style="width: 100px;height: 100px;float: left;margin-left: 30px;background: #1E90FF"></div> 
<div id="get" style="width: 100px;height: 100px;float: left;margin-left: 30px;background: #1d9e74"></div> 
<input type="button" value="Очистить" onclick="sty()">

Надо что бы картинка появлялась в тех координатах которые при клики у мышке в блоке.

Answer 1

Вроде такого? Ваш же код с минимальными изменениями.

document.getElementById('get').onclick = function(e) { 
  var x = e.clientX == undefined ? e.layerX : e.clientX; // client вместо offset (так должно даже при прокрученной странице работать вроде бы) 
  var y = e.clientY == undefined ? e.layerY : e.clientY; // то же самое 
  var get = document.getElementById('get'); // определяем get, иначе откуда в последней строчке он возьмется? 
  var img = document.createElement('img'); 
  img.src = 'https://avatanplus.com/files/resources/original/57d55366a6bde157194dc91b.png'; 
  // img.id = 'go'; нельзя одинаковые id делать 
  img.style.width = "20px"; 
  img.style.height = "20px"; 
  img.style.top = "" + y - 10 + "px"; // - половина высоты картинки 
  img.style.left = "" + x - 10 + "px"; // - половина высоты картинки 
  img.style.position = "absolute"; // абсолютное позиционирование 
  get.appendChild(img); 
}; 
 
function sty() { 
  var elem = document.getElementById('get'); 
  while (elem.firstChild) { 
    elem.removeChild(elem.firstChild); 
  } 
}

<div id="1ro" style="width: 100px;height: 100px;float: left;margin-left: 30px;background: #1E90FF"></div> 
<div id="get" style="width: 100px;height: 100px;float: left;margin-left: 30px;background: #1d9e74"></div> 
<input type="button" value="Очистить" onclick="sty()">