如何使用framer-motion组件内特定元素作为拖拽触发手柄

实现仅通过指定手柄触发拖拽的核心是使用framer-motion提供的useDragControlsAPI，手动控制拖拽的触发时机，具体操作步骤如下：

• 第一步：从framer-motion中导入依赖

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

• 第二步：在可拖拽列表项组件内初始化拖拽控制器

  const dragControls = useDragControls()
  

• 第三步：给可拖拽容器（原Reorder.Item/motion.div）绑定控制器，同时禁用容器自身的拖拽监听

  <Reorder.Item
    value={itemId}
    // 禁用容器自身的拖拽触发
    dragListener={false}
    // 绑定自定义拖拽控制器
    dragControls={dragControls}
    {/* 其余原有属性保持不变 */}
  >
  

• 第四步：给指定为拖拽手柄的红色方框添加触发事件

  <div
    style={{
      width: 20,
      height: 20,
      background: "red",
      cursor: "grab",
      marginRight: 12
    }}
    // 指针按下时触发拖拽
    onPointerDown={(e) => dragControls.start(e)}
  />
  

额外说明 #

• 原有拖拽排序的动画、重排逻辑不需要做任何修改，完全兼容原有功能
• 可以给手柄添加:active伪类样式优化交互，比如cursor: grabbing的按压态反馈

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