如何控制reactjs中的可拖动道具？

我试图创建一个可拖动的组件来重新排序它们，我创建了一个可拖动的

，但问题是

当我拖动图标时，它不会随之拖动元素 那么，我怎样才能只通过图标来拖动元素呢？在这个图标中，我不能向下拖动元素，但我只能在向下拖动图标时拖动它

• 注意：我知道我可以在元素

  onMousedown={undragable}

  和图标

  onMousedown={dragable}

  上这样做。但我也很抱歉，我不知道该怎么做

import React，{useState}来自“React”；
从“@material ui/icons/DragIndicator”导入DragIndicator图标；
常量行=[
{文本：“阿里”}，
{文本：“alex”}，
{sub:[{text:“first”}，{text:“second”}]}
];
导出默认函数App（）{
//常量[D，setD]=useState（[]）
函数可拖动（子级，索引）{
console.log（子级）
返回(
{
e、 坚持（）；
e、 target.style.opacity=“0.1”；
}}
onDragEnd={（e）=>{
e、 target.style.opacity=“1”；
}}
onDragOver={（e）=>{
e、 坚持（）；
//console.log（如target）；
e、 target.style.background=“rgba（0250255,0.5）”；
}}
Ondragleeve={（e）=>{
e、 坚持（）；
//console.log（如target）；
e、 target.style.background=“#f0f7”；
}}
onDrop={（e）=>{
e、 预防默认值（）；
console.log（e.target.id）；
}}
>
{typeof child.props.children==“string”&&child}
{typeof child.props.children==“对象”&&
{child.props.children}
{
e、 坚持（）；
//console.log（如target）；
e、 target.style.background=“rgba（0250255,0.5）”；
}}
Ondragleeve={（e）=>{
e、 坚持（）；
//console.log（如target）；
e、 target.style.background=“无”；
}}
风格={{
背景：“无”，
边距：“0px”，
宽度：“100%”，
高度：“5px”
}}
>
)
}
函数拖动（{children}）{
console.log（childrence.length&&true）
返回(
childrence.length？children.map（（子级，索引）=>Dragable（子级，索引））：Dragable（子级）
);
}
最终功能（行）{
返回(
rows.map（（项目）=>(
{item.sub？最终（item.sub）：item.text}
))
);
}
返回(
{最后（行）}
);
}

import React, { useState } from "react";
import DragIndicatorIcon from '@material-ui/icons/DragIndicator';
const rows = [
  { text: "ali" },
  { text: "alex" },
  { sub: [{ text: "first" }, { text: "second" }] }
];
export default function App() {
  // const [D, setD] = useState([])

  function Dragable(child, index) {
    console.log(child)
    return (
      <div style={{ display: 'flex' }} >
        <div draggable><DragIndicatorIcon /></div>
        <div
          style={{
            background: "#F0F0F7",
            border: "1px solid rgba(0, 0, 0,0.3)",
            borderRadius: "5px",
          }}

          id={index}
          key={index}

          onDragStart={(e) => {
            e.persist();
            e.target.style.opacity = "0.1";
          }}
          onDragEnd={(e) => {
            e.target.style.opacity = "1";

          }}
          onDragOver={(e) => {
            e.persist();
            // console.log(e.target);
            e.target.style.background = "rgba(0, 250, 255,0.5)";
          }}
          onDragLeave={(e) => {
            e.persist();
            // console.log(e.target);
            e.target.style.background = "#F0F0F7";
          }}
          onDrop={(e) => {
            e.preventDefault();
            console.log(e.target.id);
          }}
        >
          {typeof child.props.children === "string" && child}
          {typeof child.props.children === "object" &&
            <div style={{ marginLeft: '20px' }}> <Drag >{child.props.children}</Drag></div>}
        </div>
        <div
          onDragOver={(e) => {
            e.persist();
            // console.log(e.target);
            e.target.style.background = "rgba(0, 250, 255,0.5)";
          }}
          onDragLeave={(e) => {
            e.persist();
            // console.log(e.target);
            e.target.style.background = "none";
          }}
          style={{
            background: "none",
            margin: "0px",
            width: "100%",
            height: "5px"
          }}
        >

        </div>
      </div>

    )
  }

  function Drag({ children }) {
    console.log(children.length && true)
    return (
      children.length ? children.map((child, index) => Dragable(child, index)) : Dragable(children)
    );
  }

  function Final(rows) {
    return (
      rows.map((item) => (
        <div >{item.sub ? Final(item.sub) : item.text}</div>
      ))
    );
  }
  return (
    <div className="App">
      <Drag>
        {Final(rows)}
      </Drag>


    </div >
  );
}