HTML表格中的OnDrop事件触发两次

问题描述

这是分配给表以动态呈现的数组

  let columns = [
    {
      text: "Id",dataField: "id",},{ text: "Name",dataField: "name" },{
      text: "Gender",dataField: "Gender",];

我有一个类似th tag的代码，它是react代码的一部分，它基本上呈现表。它通过数组动态呈现

            {col.map((col,i) => {
              return (
                <th
                  draggable
                  scope="col"
                  key={col.text}
                  className={dragging ? getStyles(col.dataField) : "text"}
                  onDragStart={(e) => ondragstart(e,col.dataField)}
                  onDragEnd={(e) => handledragend(e,col.dataField)}
                  onDragOver={(e) => handledragover(e,"#")}
                  onDrop={
                    dragging ? (e) => handledragdrop(e,col.dataField) :null
                    
                  }
                >
                  {col.text}
                </th>
              );
            })}

触发ondragstart时，

拖动设置为true

这是我的拖放事件监听器

const ondragstart = (e: any,colname: any) => {
   
    dragItem.current = colname;
    Setdragging(true);
  };
  const handledragdrop = (
    e:any,colname: string
  ) => {
    e.preventDefault()
    
    let currentitem = dragItem.current;          //holds the item which is currently dragging
    let hoveritem = colname;                     // holds the item on which the current item hovers to
    let currentitemindex = col.findIndex(
      (newcol) => newcol.dataField === currentitem
    );
    let hoveritemindex = col.findIndex(
      (newcol) => newcol.dataField === hoveritem
    );
   

    if (colname !== dragItem.current) {
      Setcol((col) => {
        let newcol: any;
        newcol = col;
       
       
        [newcol[currentitemindex],newcol[hoveritemindex]=[newcol[hoveritemindex],newcol[currentitemindex]]     /// swapping the hovered item and current item
       
        
        return newcol;
      });
    }
  };
  const handledragend = (
    e: React.DragEvent<HTMLTableHeaderCellElement>,colname: string
  ) => {
    Setdragging(false);
    dragItem.current = null;
  };
  const handledragover =(e: React.DragEvent<HTMLTableHeaderCellElement>,colname: string) =>
  {
    e.preventDefault()
   
    
  }

如果要进行任何更改，请告诉我

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）