拖拽样式处理

src/Table.js

@@ -148,6 +148,7 @@ class Table extends Component{
         expandedRowKeys: nextProps.expandedRowKeys,
       });
     }
+    debugger;
     if (nextProps.columns && nextProps.columns !== this.props.columns) {
       this.columnManager.reset(nextProps.columns);
     } else if (nextProps.children !== this.props.children) {
@@ -220,9 +221,8 @@ class Table extends Component{
   }
 
   getHeader(columns, fixed) {
-    const { showHeader, expandIconAsCell, clsPrefix ,onDragStart,onDragOver,onDrop,draggable} = this.props;
+    const { showHeader, expandIconAsCell, clsPrefix ,onDragStart,onDragEnter,onDragOver,onDrop,draggable} = this.props;
     const rows = this.getHeaderRows(columns);
-
     if (expandIconAsCell && fixed !== 'right') {
       rows[0].unshift({
         key: 'u-table-expandIconAsCell',
@@ -233,7 +233,7 @@ class Table extends Component{
     }
 
     const trStyle = fixed ? this.getHeaderRowStyle(columns, rows) : null;
-    let drop = draggable?{onDragStart,onDragOver,onDrop,draggable}:{};
+    let drop = draggable?{onDragStart,onDragOver,onDrop,onDragEnter,draggable}:{};
     return showHeader ? (
       <TableHeader
         {...drop}
@@ -258,6 +258,7 @@ class Table extends Component{
         key: column.key,
         className: column.className || '',
         children: column.title,
+        drgHover: column.drgHover
       };
       if (column.children) {
         this.getHeaderRows(column.children, currentRow + 1, rows);

src/Table.scss

@@ -31,7 +31,7 @@ $table-move-in-color: $bg-color-base;
   }
 
   th {
-    background: $table-head-background-color;
+    // background: $table-head-background-color;
     font-weight: bold;
     transition: background 0.3s ease;
     &[colspan] {
@@ -69,13 +69,16 @@ $table-move-in-color: $bg-color-base;
   &-bordered {
     table {
       border: 1px solid #e9e9e9;
+      box-sizing: border-box;
     }
     th {
       border-bottom: 1px solid #e9e9e9;
+      box-sizing: border-box;
     }
     th,
     td {
       border-right: 1px solid #e9e9e9;
+      box-sizing: border-box;
     }
   }
   &-header {
@@ -248,6 +251,20 @@ $table-move-in-color: $bg-color-base;
   &-scroll-position-right &-fixed-right {
     box-shadow: none;
   }
+
+  &-thead{
+
+    th{
+      background: $table-head-background-color;
+    }
+    .th-drag{
+      cursor: move;
+      box-sizing: border-box;
+    }
+    .th-drag-hover{ 
+      background: #ccc;
+    }
+  }
 }
 
 .u-table.bordered {
@@ -494,4 +511,4 @@ $table-move-in-color: $bg-color-base;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-}
+}

src/TableHeader.js

@@ -12,12 +12,37 @@ class TableHeader extends Component{
 
   constructor(props){
     super(props);
+    this.currentObj = null;
   }
 
   shouldComponentUpdate(nextProps) {
     return !shallowequal(nextProps, this.props);
   }
- 
+
+  onDragStart=(event,data)=>{
+    event.dataTransfer.effectAllowed = "move";
+    event.dataTransfer.setData("Text",data.key);
+    this.currentObj = data;
+    event.dataTransfer.setDragImage(event.target, 0, 0);
+    this.props.onDragStart(event,data);
+  }
+  
+  onDragOver=(event,data)=>{
+    if(this.currentObj.key == data.key)return;
+    event.preventDefault();
+    this.props.onDragOver(event,data);
+  }
+
+  onDragEnter=(event,data)=>{
+    if(this.currentObj.key == data.key)return;
+    this.props.onDragEnter(event,data);
+  }
+
+  onDrop=(event,data)=>{
+    if(this.currentObj.key == data.key)return;
+    this.props.onDrop(event,data);
+  }
+  
   render() {
     const { clsPrefix, rowStyle ,onDragStart,onDragOver,onDrop,draggable,rows} = this.props;
     return (
@@ -26,9 +51,17 @@ class TableHeader extends Component{
           rows.map((row, index) => (
             <tr key={index} style={rowStyle}>
               {row.map((da, i) => {
-                return draggable?(<th 
+                let thHover =  da.drgHover?` ${clsPrefix}-thead th-drag-hover`:"";
-                  onDragStart={(event)=>{this.props.onDragStart(event,da)}} onDragOver={this.props.onDragOver} onDrop={(event)=>{this.props.onDrop(event,da)}} draggable={draggable}
+                return draggable?(
-                {...da} key={i} />):(<th {...da} key={i} />);
+                <th
+                  onDragStart={(event)=>{this.onDragStart(event,da)}} 
+                  onDragOver={(event)=>{this.onDragOver(event,da)}}
+                  onDrop={(event)=>{this.onDrop(event,da)}} 
+                  onDragEnter={(event)=>{this.onDragEnter(event,da)}}
+                  draggable={draggable}
+                  className={`${da.className} ${clsPrefix}-thead th-drag ${thHover}`}
+                  key={i}
+                  >{da.children}</th>):(<th {...da} key={i} />);
             })}
             </tr>
           ))

src/lib/dragColumn.js

@@ -16,7 +16,8 @@ export default function dragColumn(Table) {
 
     constructor(props) {
       super(props);
-      const {columns} = props;
+      const {columns} = props; 
+      const { clsPrefix} = props;
       this.setColumOrderByIndex(columns);
     }
 
@@ -31,6 +32,7 @@ export default function dragColumn(Table) {
       Object.assign(_column,columns); 
       _column.forEach((da,i) => {
           da.dragIndex = i;
+          da.drgHover = false;
       });
       this.state = {
         columns:_column
@@ -38,12 +40,23 @@ export default function dragColumn(Table) {
     }
 
 
-    onDragStart=(event,data)=>{
+    onDragStart=(event,data)=>{ 
-      event.dataTransfer.setData("Text",data.key);
     }
 
-    onDragOver=(event)=>{
+    onDragOver=(event,data)=>{
-      event.preventDefault();
+     
+    }
+
+    onDragEnter=(event,data)=>{
+      const {columns:_columns} = this.state;
+      let columns = [];
+      Object.assign(columns,_columns);
+      columns.forEach((da)=>da.drgHover = false)
+      let current = columns.find((da)=>da.key == data.key);
+      current.drgHover = true;
+      this.setState({
+        columns
+      })
     }
 
     onDrop=(event,data)=>{
@@ -53,26 +66,27 @@ export default function dragColumn(Table) {
       let targetIndex = columns.findIndex((_da,i)=>_da.key == data.key);
 
       columns.forEach((da,i)=>{
+        da.drgHover = false;
         if(da.key == id){//obj
           da.dragIndex = targetIndex
         }
         if(da.key == data.key){//targetObj
-          da.dragIndex = objIndex
+          da.dragIndex = objIndex;
         }
       });
      let _columns = sortBy(columns,(da)=>da.dragIndex);
-      console.log("_columns--",_columns);
       this.setState({
-        columns:_columns
+        columns:_columns,
-      })
+      });
     }
 
     render() {
       const {data} = this.props;
       const {columns} = this.state;
-
       return (<Table {...this.props} columns={columns} data={data} 
-          onDragStart={this.onDragStart} onDragOver={this.onDragOver} onDrop={this.onDrop} draggable={true} 
+          onDragStart={this.onDragStart} onDragOver={this.onDragOver} onDrop={this.onDrop} 
+          onDragEnter={this.onDragEnter}
+          draggable={true} 
       />)
     }
   };