javascript – How to move child element on click in js?

Question:

Given a box block box wide and high, inside which there is a green square 400px 50px child , when you click on any area of the parent box block, the child child element moves to the clicked place. I got confused in js code.

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;
}

<div id="box">
  <div class="child"></div>
</div>

Answer:

$(".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;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="box">
  <div class="child">
  </div>
</div>

Post Views: 18