将鼠标保持在 div 内，如果鼠标在边框内触摸，该 div 就会移动

Question

我正在尝试构建一种被圆圈包围的十字准线，该圆圈可以缩放图像以更精确地拍摄。我想要的行为是十字准线也是我的鼠标指针，它可以在圆圈内移动，一旦它从内部接触到我的圆圈边缘，它就会将它移动到想要的位置。目前，我只能移动固定在中间的十字准线的圆圈。你能帮我让它在我的圈子里移动吗？

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

我对其进行了一些重构并添加了代码来检测光标何时超出圆圈。

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>