原版 javascript 可在父级内拖动 div

Question

我想在原版中实现可拖动元素 javascript。我想制作一个小圆形 div 可在正方形 div 内拖动。

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

创建拖放，
使用 jQuery UI 或任何其他库或插件来实现这一点，只是香草 javascript

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

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

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

参考：https://codepen.io/ChickenFlavored/pen/rNxRXGo

Answer 1

我希望你能提供一个代码片段来尝试模拟你想要的东西，codepen url，codesandbox 或类似的东西。

我使用您提供的内容制作了这个示例:)

let x = event.clientX - element.offsetLeft
const elementWidth = element.clientWidth
const fullX = x + elementWidth
const containerW = yourContainer.clientWidth
if(fullX > containerW){
  //If element will be out of container
  x = containerW - elementWidth // So it will be never out of container
}
element.style.transform = "translate("+x+"px, "+y+"px)"

Answer 2

您可以使用 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 [=36的边界矩形之外=] 如果是，则只更新 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

原版 javascript 可在父级内拖动 div

Vanilla javascript draggable div within parent

javascript

color-picker

draggable