Как перемещать дочерний элемент по клику в js?

#javascript

Дан блок box шириной и высотой 400px, внутри которого находится зеленый квадрат шириной
50px child, необходимо при нажатии на любую область родительского блока box чтобы дочерний
элемент child переместился в место клика. Запуталась в js коде.



let box = document.getElementById('box');
let child = document.getElementById('child');
child.onmousemove = funcMouse;
child.style.top = (event.clientY - 50) + 'px';
child.style.left = (event.clientX - 25) + 'px';

function funcMouse(event) {
  this.innerHTML = event.clientX + ' - ' + event.clientY;
}
#box {
  position: relative;
  width: 400px;
  height: 400px;
  border: 1px solid black;
}

.child {
  position: fixed;
  width: 50px;
  height: 50px;
  background: green;
}

  





    

Ответы

Ответ 1

Ошибок больше чем кода...



let box = document.getElementById('box');
// child - это class, но почему-то ты ищешь этот элемент по ID 
//let child = document.getElementById('child'); 
let child = document.getElementsByClassName('child')[0];

//Если меняешь положение элемента по клику при чем тут событие mousemove?

box.addEventListener('click', function() {
  //  значения надо менять в пределах функции
  child.style.top = (event.clientY - 25) + 'px';
  child.style.left = (event.clientX - 25) + 'px';
  child.innerHTML = event.clientX + ' - ' + event.clientY;
});
#box {
  position: relative;
  width: 400px;
  height: 400px;
  border: 1px solid black;
}

.child {
  /* а почему не absolute раз перетаскиваешь элемент в пределах родителя */
  position: fixed;
  width: 50px;
  height: 50px;
  background: green;
  /*а если еще добавть transition то переход будет плавным*/
  transition: all .3s;
}

  




Ответ 2

$(".box").click(function(e) {
  var offset = $(this).position();
  var $child = $(this).find(".child");
  $child.css({
    left: e.clientX - offset.left - $child.width() / 2 + "px",
    top: e.clientY - offset.top - $child.height() / 2 + "px"
  });
});
.box {
  border: 1px solid black;
  background-color: lightgreen;
  width: 300px;
  height: 150px;
  overflow: hidden;
}

.child {
  border: 1px solid black;
  background-color: green;
  width: 20px;
  height: 20px;
  position: relative;
}