React Beautiful DnD - 将拖动手柄设置为仅列表项标记

Question

我正在使用 React Beautiful DnD 创建嵌套列表。我知道这个库不支持，但是我已经看到了很多变通方法，而且我的用例相对简单（没有在父列表之间拖动子列表元素；子列表元素只能在它们各自的子列表中拖动列表）。

问题如下：尝试从嵌套列表中拖动元素有时会拖动父列表元素。（我刚刚做了一个很长的 post 记录我的问题 here.)

我还没有收到任何回复，所以我开始思考其他可能解决问题的方法。我意识到一个解决方案可能是只选择每个列表元素的一个特定区域，可以点击拖动，并确保这个区域在 parent/nested 个列表之间不重叠。

看到这是可能的，我只需要将{...provided.dragHandleProps}添加到我想用作拖动手柄的元素。

但是，我的嵌套列表是使用我编写的可重用 DnDList 组件的两个实例构建的，因此它变得有点复杂。我不想弄清楚如何将拖动手柄指定为道具，我只想将拖动手柄设置为 list item marker 每个列表项（'1'，每个列表项旁边的“2”、“3”等）。

如何将 {...provided.dragHandleProps} 添加到列表的 li::marker 元素中？

Answer 1

我是这样想的：

我最终使用CSS关闭列表项标记（listStyle: "none"），然后用可点击拖动icon[=26]将每个DnDList项目包裹在一个flex容器中=] 我手动放置在列表项的左侧（flex 容器中的第一个兄弟项）。

我还在拖动图标上覆盖一个不可见的div，并将{...provided.dragHandleProps}放在这里。它看起来像这样：

<div className={classes.listItemWrapper}>
  <div
    className={invisibleDiv}
    {...provided.dragHandleProps} // MUST CLICK THIS TO DRAG
  >
    <DragIndicatorIcon className={classes.dragIcon} />
  </div>
  {child}
 </div>

样式如下（使用 material UI）：

listItemWrapper: {
display: "flex",
position: "relative",
},
invisibleDiv: {
  position: "absolute",
  left: "-4%",
  top: "36%",
  width: "40px",
  height: "40px",
  textAlign: "center",
},

希望对大家有用！

Answer 2

我看不到你的 DnD 组件。但可能的解决方案是从必须解决问题的内部 DnD 组件中删除 DragDropContext 组件。这意味着您的整个 Draggable 和 droppable 必须只有一个 DragDropContext。