React Beautiful DnD如何仅将li列表项标记设置为拖拽手柄

云原生阿岚

2026-10-1

无法直接给li::marker伪元素绑定{...provided.dragHandleProps}，因为CSS伪元素不属于真实DOM节点，React无法直接为其添加属性、绑定事件监听。

可行实现方案

你可以通过隐藏原生列表标记，用真实DOM元素模拟序号标记的方式实现需求，该方案不需要改动你现有DnDList组件的props逻辑，还能天然避免父子列表拖拽触发区重叠的问题，实现步骤如下：

先通过CSS关闭原生列表标记，给自定义序号预留位置：

.dnd-list-item {
  list-style: none;
  position: relative;
  /* 子列表可以继承该padding，天然形成缩进，手柄位置自然错开 */
  padding-left: 2em;
}

在Draggable渲染的li内部，新增一个专门用来展示序号的DOM元素，将{...provided.dragHandleProps}绑定到该元素上：

// Draggable 组件内部渲染逻辑示例
<Draggable draggableId={item.id} index={index}>
  {(provided) => (
    <li
      ref={provided.innerRef}
      {...provided.draggableProps}
      className="dnd-list-item"
    >
      {/* 自定义序号拖拽手柄 */}
      <span className="dnd-drag-handle" {...provided.dragHandleProps}>
        {index + 1}
      </span>
      {/* 原有列表项内容、嵌套子列表保持不变 */}
      {item.content}
      {item.children && <DnDList items={item.children} />}
    </li>
  )}
</Draggable>

给自定义手柄添加样式，还原原生列表标记的视觉效果，同时添加拖拽手势提示：

.dnd-drag-handle {
  position: absolute;
  left: 0;
  width: 1.5em;
  text-align: right;
  color: #888;
  cursor: grab;
  user-select: none;
}
.dnd-drag-handle:active {
  cursor: grabbing;
}