React Beautiful DnD-将拖动手柄设置为仅列表项MARKER答案

【问题标题】：React Beautiful DnD- set the drag handle to be ONLY the list item MARKERReact Beautiful DnD-将拖动手柄设置为仅列表项MARKER
【发布时间】：2021-11-25 04:52:31
【问题描述】：

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

问题如下：尝试从嵌套列表中拖动元素有时会拖动父列表元素。（我刚刚发了一篇很长的帖子来记录我的问题here。）

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

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

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

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

【问题讨论】：

标签： reactjs list drag-and-drop listitem react-beautiful-dnd

【解决方案1】：

我是这样理解的：

我最终使用 CSS 来关闭列表项标记 (listStyle: "none")，然后将每个 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>

这是样式的样子（使用材质 UI）：

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

希望这对somone有用！

【讨论】：