如何使用JavaScript、jQuery UI或Interact JS实现自定义形状内的拖放功能

问题原因 #

你使用CSS属性限制失败的核心原因是：border-radius、overflow、clip-path仅做视觉层面的渲染裁剪，不会改变元素的盒模型边界，拖拽放置逻辑默认是基于元素的盒模型范围判断，而非视觉可见区域。

解决方案 #

• 方案1：放置触发时做坐标校验（最通用）
  实现逻辑：在drop事件触发时，先计算目标圆形的位置参数，再判断拖拽落点是否在圆形范围内，不符合则取消放置、让元素回退到原始位置。
  参考代码：

  // 获取圆形元素的位置和半径参数
  const circle = document.querySelector('.target-circle')
  const circleRect = circle.getBoundingClientRect()
  const circleCenterX = circleRect.left + circleRect.width / 2
  const circleCenterY = circleRect.top + circleRect.height / 2
  const circleRadius = circleRect.width / 2
  
  // 监听放置事件
  circle.addEventListener('drop', (e) => {
    e.preventDefault()
    // 获取落点坐标
    const dropX = e.clientX
    const dropY = e.clientY
    // 计算落点到圆心的距离
    const distance = Math.sqrt(Math.pow(dropX - circleCenterX, 2) + Math.pow(dropY - circleCenterY, 2))
    if (distance <= circleRadius) {
      // 落点在圆内，执行放置逻辑
    } else {
      // 落点不在圆内，取消放置，拖拽元素回退到原始位置
    }
  })
  
  // dragover事件必须阻止默认行为，否则drop事件无法触发
  circle.addEventListener('dragover', (e) => {
    e.preventDefault()
  })
  

  如果拖拽元素尺寸较大，你可以把落点判断改成拖拽元素中心位置判断、或者元素与圆形的重叠比例判断，按需调整逻辑即可。

• 方案2：修正放置目标绑定对象
  如果你之前是给圆形外层的方形div绑定的放置事件，直接改成给圆形元素本身绑定即可，不要把外层父容器设为放置目标，这样默认只有光标落在圆形元素的可视区域范围内才会触发放置逻辑。

• 方案3：第三方拖拽库自定义校验
  如果你使用的是vue-draggable、react-dnd等封装好的拖拽库，直接调用库提供的放置校验钩子，把方案1的坐标判断逻辑写入钩子中，不符合条件就返回false禁止放置即可。

内容的提问来源于stack exchange，提问作者Ramy Moustafa