如何不使用draggable事件在父容器内拖拽元素？Angular实现求助

咱们先梳理下现有代码的核心问题，再给出完整的可行实现逻辑：

现有代码的问题 #

1. 拖拽触发逻辑不对：你在mouse_move2里判断左键点击，但拖拽的正确触发应该是鼠标按下时记录偏移，而不是在移动时才处理，这样容易出现位置计算偏差。
2. 位置计算逻辑有误：用mouse_x + offset_x的方式叠加位置，没有考虑元素本身的初始位置和鼠标相对于元素的偏移，会导致元素“跳步”。
3. 缺少边界限制逻辑：没有计算容器和元素的尺寸，无法判断元素是否超出容器范围。

正确的实现思路 #

1. 拖拽三阶段：
   • 按下（mousedown）：标记拖拽状态，记录鼠标相对于元素左上角的偏移量（避免拖拽时元素瞬移）。
   • 移动（mousemove）：如果处于拖拽状态，计算鼠标在容器内的位置，结合偏移量得出元素目标位置，再限制位置在容器范围内。
   • 松开（mouseup）：取消拖拽状态。
2. 边界限制计算：
   • 容器的可拖拽区域 = 容器尺寸 - 元素尺寸，元素的top和left不能小于0，也不能超过这个可拖拽区域的最大值。

完整代码实现 #

HTML 部分 #

<div class="subbox" ng-mousemove="mouseMoveSubbox($event)" ng-mouseup="mouseUp()">
  <div class="element" ng-mousedown="mouseDownElement($event)">
    可拖拽元素
  </div>
</div>

CSS 部分（必须配置，否则定位无效） #

.subbox {
  position: relative; /* 作为绝对定位元素的父容器 */
  border: 1px dashed #666;
  width: 400px;
  height: 300px;
  margin: 20px;
}
.element {
  position: absolute; /* 基于父容器定位 */
  width: 100px;
  height: 100px;
  background: #42b983;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: move;
}

JavaScript 部分 #

var isDragging = false;
var dragOffsetX = 0;
var dragOffsetY = 0;
// 获取DOM元素引用（建议用querySelector，比getElementsByClassName更精准）
var subboxEl = document.querySelector('.subbox');
var elementEl = document.querySelector('.element');

// 鼠标按下元素时触发：初始化拖拽状态
$scope.mouseDownElement = function(event) {
  isDragging = true;
  // 记录鼠标相对于元素左上角的偏移量（关键：避免拖拽时元素瞬移）
  dragOffsetX = event.offsetX;
  dragOffsetY = event.offsetY;
  // 阻止事件冒泡，避免容器的mousemove提前触发
  event.stopPropagation();
};

// 鼠标在容器内移动时触发：计算并限制元素位置
$scope.mouseMoveSubbox = function(event) {
  if (!isDragging) return; // 非拖拽状态直接返回
  
  // 获取容器的绝对位置和尺寸（不受页面滚动影响）
  var subboxRect = subboxEl.getBoundingClientRect();
  // 计算鼠标相对于容器左上角的位置
  var mouseXInBox = event.clientX - subboxRect.left;
  var mouseYInBox = event.clientY - subboxRect.top;
  
  // 计算元素的目标位置：鼠标位置减去偏移量
  var targetLeft = mouseXInBox - dragOffsetX;
  var targetTop = mouseYInBox - dragOffsetY;
  
  // 计算容器可容纳元素的最大边界
  var maxLeft = subboxRect.width - elementEl.offsetWidth;
  var maxTop = subboxRect.height - elementEl.offsetHeight;
  
  // 强制限制元素在容器范围内：不能小于0，不能超过最大边界
  targetLeft = Math.max(0, Math.min(targetLeft, maxLeft));
  targetTop = Math.max(0, Math.min(targetTop, maxTop));
  
  // 设置元素的最终位置
  angular.element(elementEl).css({
    left: targetLeft + 'px',
    top: targetTop + 'px'
  });
};

// 鼠标松开时触发：结束拖拽状态
$scope.mouseUp = function() {
  isDragging = false;
};

关键细节说明 #

• 定位依赖：必须给subbox设置position: relative，element设置position: absolute，这样元素的top/left才会相对于容器定位。
• 偏移量记录：按下时记录鼠标在元素内的偏移，是为了保证拖拽时元素的“抓手”位置和鼠标一致，不会出现点击元素边缘时元素瞬移到鼠标位置的问题。
• 边界限制：用Math.max和Math.min做范围约束，确保元素无论怎么拖都不会超出容器的虚线边框。

内容的提问来源于stack exchange，提问作者Absolute Idiot