Javascript 帧框运动拖动：将拖动目标设置为可拖动父对象的子对象

我正在尝试使用Framer Motion设置一个组件，该组件有一个可拖动的div，但拖动目标（可拖动的元素）是可拖动父div的子级。与操作系统窗口类似，只能通过顶部菜单栏拖动。我摆弄过拖动控制，但我不知道这是否是我的答案。如果我将motion.div设置为child div，则只有它会移动

         <motion.div drag > // This entire div should move when the target is dragged
            <div> // I only want this div to be the draggable target
                <span>DRAG ME</span>
            </div>
            <div>
                <p>This div should move with the parent draggable div, but you can not drag from this div.</p>
            </div>
        </motion.div>

//拖动目标时，整个div应该移动
//我只想让这个小分队成为目标
拖我
此div应与父可拖动div一起移动，但不能从此div拖动

不幸的是，目前没有简单的方法可以做到这一点。 这个小“黑客”可能是唯一的方法：（你是对的，需要拖动控制）

从“帧运动”导入{motion，useDragControls}；
导出常量示例=（）=>{
const dragControls=useDragControls（）；
启动功能（e，信息）{
//如果不是来自句柄，我们将忽略拖动请求
如果（！e.target.classList.contains（'drag handle'））{
//停止拖动-需要从库中拖动'e'和'info'
DragControl.componentControls.forEach（条目=>{
进入。停止（e，信息）
})
}
}
返回(
//将dragControls和onDragStart添加到要拖动的div中
{*向启用拖动的元素添加描述性类*}
拖我
此div应与父可拖动div一起移动，但不能从中拖动
这个部门

)

}

import { motion, useDragControls } from "framer-motion";

export const Example = () => {
  const dragControls = useDragControls();

  function onDragStart(e, info) {
    // We will ignore the request to drag if it's not coming from the handle
    if (!e.target.classList.contains( 'drag-handle' ) ) {
    
      // Stop the drag - `e` and `info` are needed from the library
      dragControls.componentControls.forEach( entry => {
        entry.stop( e, info )
      })
    }
  }

return (
  // Add dragControls and onDragStart to the div you want to be draggable
  <motion.div
    drag
    dragControls={dragControls}
    onDragStart={onDragStart}
  >
    <div>
      {* Add a descriptive class to the element that enables the dragging *}
      <span className="drag-handle">DRAG ME</span>
    </div>
    <div>
      <p>This div should move with the parent draggable div, but you can not drag from 
      this div.</p>
    </div>
  </motion.div>
)