拖拽交换行,顺序错位问题

src/Table.js

@@ -146,9 +146,11 @@ class Table extends Component {
     this.handleRowHover = this.handleRowHover.bind(this);
     this.computeTableWidth = this.computeTableWidth.bind(this);
     this.onBodyMouseLeave = this.onBodyMouseLeave.bind(this);
+    this.tableUid = null;
   }
 
   componentDidMount() {
+    this.getTableUID();
     EventUtil.addHandler(this.contentTable,'keydown',this.onKeyDown);
     EventUtil.addHandler(this.contentTable,'focus',this.onFocus);
     setTimeout(this.resetScrollX, 300);
@@ -244,6 +246,17 @@ class Table extends Component {
       renderFlag: !renderFlag
     });
   }
+
+  getTableUID =()=>{
+    let uid = "_table_uid_"+new Date().getTime();
+    this.tableUid = uid;
+    let div = document.createElement("div");
+    // div.className = "u-table-drag-hidden-cont";
+    div.className = "u-table-drag-hidden-cont";
+    div.id = uid;
+    this.contentTable.appendChild(div);
+  }
+
   computeTableWidth() {
     
     //如果用户传了scroll.x按用户传的为主
@@ -531,15 +544,23 @@ class Table extends Component {
     );
   }
 
-  onDragRow = (currentIndex,targetIndex)=>{
-    let {data} = this.state,
-    currentObj = data[currentIndex],
-    targetObj = data[targetIndex];
-    console.log(currentIndex+" ----------onRowDragEnd-------- "+targetIndex);
-    data.splice(targetIndex, 0, data.splice(currentIndex, 1).shift());
-    console.log(" _data---- ",data);
+  onDragRow = (currentKey,targetKey)=>{
+    let {data} = this.state,currentIndex,targetIndex;
+    data.forEach((da,i)=>{ 
+      if(da.key == currentKey){
+        currentIndex = i;
+      }
+      if(da.key == targetKey){
+        targetIndex = i;
+      }
+    });
+    if(currentIndex < targetIndex){
+      data.splice(targetIndex, 0, data.splice(currentIndex, 1).shift());
+    }else{
+      data.splice((targetIndex+1), 0, data.splice(currentIndex, 1).shift());
+    }
     this.setState({
-      data: data,
+      data,
     });
   }
 
@@ -645,7 +666,7 @@ class Table extends Component {
           indent={indent}
           indentSize={props.indentSize}
           needIndentSpaced={needIndentSpaced}
-          className={className}
+          className={`${className} ${this.props.rowDraggAble?' row-dragg-able ':''}`}
           record={record}
           expandIconAsCell={expandIconAsCell}
           onDestroy={this.onRowDestroy}
@@ -680,6 +701,7 @@ class Table extends Component {
           rowDraggAble={this.props.rowDraggAble}
           onDragRow={this.onDragRow}
           contentTable={this.contentTable}
+          tableUid = {this.tableUid}
         />
       );
       this.treeRowIndex++;

src/Table.scss

@@ -647,7 +647,17 @@ $icon-color:#505F79;
   ::-webkit-scrollbar-track-piece {
     display: none;
   }
+
+  .row-dragg-able{
+    cursor:move;
+  }
+  .u-table-drag-hidden-cont{
+    width: 100px;
+    height: 40px;
+  }
+
 }
+
 .u-table:focus{
   outline: none;
   // border-color: #9ecaed;

src/TableRow.js

@@ -133,6 +133,11 @@ class TableRow extends Component{
     target = Event.getTarget(event);
      this.currentIndex = target.getAttribute("data-row-key");
      this._dragCurrent = target;
+ 
+    //TODO 自定义图像后续需要增加。
+    //  let crt = this.synchronizeTableTrShadow(); 
+    //  document.getElementById(this.props.tableUid).appendChild(crt);
+    // event.dataTransfer.setDragImage(crt, 0, 0);
      event.dataTransfer.effectAllowed = "move";
      event.dataTransfer.setData("Text", this.currentIndex);
   }
@@ -150,17 +155,42 @@ class TableRow extends Component{
     let {rowDraggAble,onDragRow} = this.props;
     let event = Event.getEvent(e) ,
     _target = Event.getTarget(event),target = _target.parentNode;
-    let currentIndex = target.getAttribute("data-row-key");
-    if(!currentIndex || currentIndex === this.currentIndex)return;    
+    
+    let currentKey = event.dataTransfer.getData("text");
+    let targetKey = target.getAttribute("data-row-key");
+
+    if(!targetKey || targetKey === currentKey)return;    
     if(target.nodeName.toUpperCase() === "TR"){
-      this.synchronizeTableTr(this.currentIndex,null);
+      this.synchronizeTableTr(currentKey,null);
+      this.synchronizeTableTr(targetKey,null);
       // target.setAttribute("style","");
       // this.synchronizeTrStyle(this.currentIndex,false);
     }
-    let _currentIndex = event.dataTransfer.getData("text");
-    onDragRow && onDragRow(parseInt(this.currentIndex--),parseInt(currentIndex--));
+    onDragRow && onDragRow(currentKey,targetKey);
   };
 
+
+  /**
+   *同步当前拖拽到阴影
+   * @memberof TableRow
+   */
+  synchronizeTableTrShadow = ()=>{
+    let {contentTable,index} = this.props; 
+
+    let _table_cont = contentTable.querySelector('.u-table-scroll table tbody').getElementsByTagName("tr")[index],
+    _table_trs = _table_cont.getBoundingClientRect(),
+     _table_fixed_left_trs = contentTable.querySelector('.u-table-fixed-left table tbody').getElementsByTagName("tr")[index].getBoundingClientRect(),
+    _table_fixed_right_trs = contentTable.querySelector('.u-table-fixed-right table tbody').getElementsByTagName("tr")[index].getBoundingClientRect();
+
+    let div = document.createElement("div");
+    let style = "wdith:"+(_table_trs.width + _table_fixed_left_trs.width + _table_fixed_right_trs.width)+"px";
+    style += "height:"+ _table_trs.height+"px";
+    style += "classname:"+ _table_cont.className;
+    div.setAttribute("style",style);
+    return div;
+  }
+
+
   /**
    * 同步自己,也需要同步当前行的行显示
    */