javascript - 父级内的 Vanilla javascript可拖动div

Question

我想在 vanilla javascript 中实现一个可拖动元素。我想在方形 div 中制作一个可拖动的小圆形 div。

为了让自己更清楚一点，我不想想:

• 创建拖放，
• 使用 jQuery UI 或任何其他库或插件来实现这一点，只需普通的 javascript

我已经有一些处理拖动的事件:

parent.addEventListener("mousedown", ..),
document.addEventListener("mouseup", ..)和
document.addEventListener("mousemove", ..)

我的问题是如何将可拖动对象保持在其父对象的给定范围内？

引用:https://codepen.io/ChickenFlavored/pen/rNxRXGo

Answer 1

您可以使用 getBoundingClientRect这给 DOMRect 对象(一个包含对象的无敌矩形)提供了八个属性:left、top、right、bottom、x、y、width、height。

var parent = document.querySelector('.parent');
var parentRect = parent.getBoundingClientRect();

var draggable = document.querySelector('.draggable');
var draggableRect = draggable.getBoundingClientRect();

您可以随时使用e.clientX 和e.clientY 获取鼠标(X,Y) 坐标，因此只需检查它们是否在边界矩形之外.parent div 如果是这样则只更新draggable div 的left 和top 属性

if( (e.clientX >= parentRect.left && (e.clientX+draggableRect.width <= parentRect.right)) &&
    (e.clientY >= parentRect.top && (e.clientY+draggableRect.height <= parentRect.bottom)) 
    //+draggableRect.height and +draggableRect.height accounts for the size of ball itself
){
            draggable.style.left = `${e.clientX}px`;
            draggable.style.top = `${e.clientY}px`;
}

请注意，数字在图形世界中向下和向右增加

https://codepen.io/vsk/pen/PozVryr

更新:要解决评论中提到的问题，请使用此

  if(/* mouse was moved withing red container's bounds*/)
  else{
    //if mouse went out of bounds in Horizontal direction
    if(e.clientX+draggableRect.width >= parentRect.right){
       draggable.style.left = `${parentRect.right-draggableRect.width}px`;
    }
    //if mouse went out of bounds in Vertical direction
    if(e.clientY+draggableRect.height >= parentRect.bottom){
       draggable.style.top = `${parentRect.bottom-draggableRect.height}px`;
    }
  }

并将mousemove分配给div容器的文档insted