Keep mouse within a div which mouves if mouse toches inside border

Question

I'm trying to build a sort of crosshair which is surrounded by a circle that zooms an image to shoot more precisely. The behavior I want is that crosshair which is also my mouse pointer can move inside of the circle and once it touches the edge of my circle from the inside it moves it to the wanted position. For now, I can only move my circle having crosshair fixed in the middle. Could you please help me to have it moving within my circle?

jQuery(document).ready(function() {

  var onBoxX = 0, onBoxY = 0;
  var circleWidth = 120;
  var circleHeight = 120;
  var circleBorderWidth = 1;
  var boxWidth = 500;
  var boxHeight = 500;
  var circleLeft = 0;
  var circleTop = 0;
  
   
  $(box).mousemove(function(event){
    // console.log(event);
     onBoxX = event.clientX;
     onBoxY = event.clientY;
     circleLeft = (onBoxX - circleWidth / 2 - circleBorderWidth)/ boxWidth * 100
     circleTop = (onBoxY - circleHeight / 2 - circleBorderWidth)/ boxWidth *100
    $("#circle").css({left: circleLeft+'%', top: circleTop+'%'});
  });
 
  $(circle).mousemove(function(event){
    
    console.log("circle mousemove",event.offsetX, event.offsetY);
     
  });

  

})

body{
  margin:0px;
  padding:0px;
  font-family: 'Roboto', sans-serif;
}
.box{
  width:500px;
  height:500px;
  background:#000000;
  position:relative;
  cursor:crosshair;
  overflow: hidden;
}


.circle {
    position: relative;
  background: black;
  border: solid 1px #ccc;
    width:120px;
  height:120px;
  border-radius: 50%;  
}

.crosshair{
  position: absolute;
  background-color: white;
  width:20px;
  height:20px;
  left:41.5%;
  top:41.5%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box" class="box">
  <div id="circle" class="circle">
    <div id="crosshair" class="crosshair"></div>
  </div>
</div>

Answer 1

I refactored it a bit and added code to detect when cursor is outside of circle.

jQuery(document).ready(function () {
  var cursorX = 0,
    cursorY = 0;
  var circleRadius = 60;
  var circleX = 0;
  var circleY = 0;

  function updateCursorCoords(x, y) {
    cursorX = x;
    cursorY = y;
  }

  function updateCircleCoords() {
    // First define if cursor is inside circle
    var distX = Math.abs(circleX + circleRadius - cursorX);
    var distY = Math.abs(circleY + circleRadius - cursorY);
    var dist = Math.sqrt(Math.pow(distY, 2) + Math.pow(distX, 2));
    var cursorIsInside = dist < circleRadius;

    // And update its position only when cursor is outside of circle
    if (!cursorIsInside) {
      circleX = cursorX - circleRadius;
      circleY = cursorY - circleRadius;
    }
  }

  function drawCircle() {
    $("#circle").css({ left: circleX + "px", top: circleY + "px" });
  }

  $(box).mousemove(function (event) {
    updateCursorCoords(event.clientX, event.clientY);
    updateCircleCoords();
    drawCircle();
  });
  
});

body {
  margin:0px;
  padding:0px;
  font-family: 'Roboto', sans-serif;
}

.box {
  width:500px;
  height:500px;
  background:#000000;
  position:relative;
  cursor:crosshair;
  overflow: hidden;
}

.circle {
  position: relative;
  background: black;
  border: solid 1px #ccc;
  width:120px;
  height:120px;
  border-radius: 50%;  
  box-sizing: border-box;
}

.crosshair {
  position: absolute;
  background-color: white;
  width:20px;
  height:20px;
  left:41.5%;
  top:41.5%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="box" class="box">
  <div id="circle" class="circle">
    <div id="crosshair" class="crosshair"></div>
  </div>
</div>