拖拽bug fix 修复

demo/demolist/Demo23.js

@@ -0,0 +1,67 @@
+/**
+*
+* @title 动态调整列的宽度
+* @description 点击列的表头，进行左右拖拽
+*/
+import React, { Component } from 'react';
+import Table from '../../src'; 
+import dragColumn from '../../src/lib/dragColumn';
+
+import Icon from "bee-icon";
+
+const columns23 = [
+  {
+    title: "名字",
+    dataIndex: "a",
+    key: "a",
+    width: 100
+  },
+  {
+    title: "性别",
+    dataIndex: "b",
+    key: "b",
+    width: 200
+  },
+  {
+    title: "年龄",
+    dataIndex: "c",
+    key: "c",
+    width: 200,
+    sumCol: true,
+    sorter: (a, b) => a.c - b.c
+  },
+  {
+    title: "武功级别",
+    dataIndex: "d",
+    key: "d",
+    width: 200,
+  }
+];
+
+const data23 = [
+  { a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
+  { a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
+  { a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
+];
+
+const DragColumnTable = dragColumn(Table);
+
+const defaultProps23 = {
+  prefixCls: "bee-table"
+};
+
+class Demo23 extends Component {
+  constructor(props) {
+    super(props); 
+  }
+
+  render() {
+    return <DragColumnTable columns={columns23} data={data23} bordered
+    dragborder={true}
+    />;
+  }
+}
+Demo23.defaultProps = defaultProps23;
+
+
+export default Demo23;

dist/demo.css

@@ -7895,7 +7895,8 @@ ul {
   .u-table-bordered table {
     border: 1px solid #e9e9e9;
     box-sizing: border-box;
-    table-layout: fixed; }
+    table-layout: fixed;
+    width: auto; }
   .u-table-bordered th {
     border-bottom: 1px solid #e9e9e9;
     box-sizing: border-box; }
@@ -8033,7 +8034,7 @@ ul {
     .u-table-thead-th .th-drag-gap {
       background: transparent; }
     .u-table-thead-th .th-drag-gap-hover {
-      background: red; }
+      background: #ccc; }
   .u-table-thead-th:last-child-drag-gap {
     border: none; }
 

src/Table.js

@@ -221,7 +221,7 @@ class Table extends Component{
 
   getHeader(columns, fixed) {
     const { showHeader, expandIconAsCell, clsPrefix ,onDragStart,onDragEnter,onDragOver,onDrop,draggable,
-      onMouseDown,onMouseMove,onMouseUp,dragborder} = this.props;
+      onMouseDown,onMouseMove,onMouseUp,dragborder,onThMouseMove} = this.props;
     const rows = this.getHeaderRows(columns);
     if (expandIconAsCell && fixed !== 'right') {
       rows[0].unshift({
@@ -234,7 +234,7 @@ class Table extends Component{
 
     const trStyle = fixed ? this.getHeaderRowStyle(columns, rows) : null;
     let drop = draggable?{onDragStart,onDragOver,onDrop,onDragEnter,draggable}:{};
-    let dragBorder = dragborder?{onMouseDown,onMouseMove,onMouseUp,dragborder}:{};
+    let dragBorder = dragborder?{onMouseDown,onMouseMove,onMouseUp,dragborder,onThMouseMove}:{};
     return showHeader ? (
       <TableHeader
         {...drop}
@@ -462,7 +462,7 @@ class Table extends Component{
   renderDragHideTable=()=>{
     const {columns,} = this.props;
     let sum = 0;
-    return(<div className={`${this.props.clsPrefix}-hiden-drag`} >
+    return(<div id="u-table-drag-hide-table" className={`${this.props.clsPrefix}-hiden-drag`} >
       {
         columns.map((da,i)=>{
           sum += da.width?da.width:0;
@@ -537,7 +537,9 @@ class Table extends Component{
       ) : null;
       return (
         <table className={` ${tableClassName} table table-bordered `} style={tableStyle}>
-          {this.getColGroup(columns, fixed)}
+          {/* {
+            this.props.dragborder?"":this.getColGroup(columns, fixed)
+          } */}
           {hasHead ? this.getHeader(columns, fixed) : null}
           {tableBody}
         </table>

src/Table.scss

@@ -27,13 +27,11 @@ $table-move-in-color: $bg-color-base;
   }
   &-hiden-drag{
     position: relative;
-
     &-li{
       position: absolute;
       top: 0px;
       left: 0px;
       height: 10px;
-      // border: 1px solid;
     }
   }
   table {
@@ -83,6 +81,7 @@ $table-move-in-color: $bg-color-base;
       border: 1px solid #e9e9e9;
       box-sizing: border-box;
       table-layout: fixed;
+      width:auto;
     }
     th {
       border-bottom: 1px solid #e9e9e9;
@@ -293,7 +292,7 @@ $table-move-in-color: $bg-color-base;
         background:transparent;
       }
       .th-drag-gap-hover{
-        background: red;
+        background: #ccc;
       }
     }
     &-th:last-child {

src/TableHeader.js

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import shallowequal from 'shallowequal';
 import {tryParseInt} from './utils';
-// import ResizableTh from './ResizableTh';
 
 const propTypes = {
     clsPrefix: PropTypes.string,
@@ -15,15 +14,22 @@ class TableHeader extends Component{
   constructor(props){
     super(props);
     this.currentObj = null;
+    this.state = {
+      border:false
+    }
+
+    //拖拽宽度处理
+    if(!props.dragborder)return;
     this.border = false;
     this.drag = {
       initPageLeftX:0,
       initLeft:0,
-      x:0
-    }
-    this.state = {
-      border:false
+      x:0,
+      width:0
     }
+    let _da = {};
+    Object.assign(_da,this.props.rows[0]);
+    this.drag.data = JSON.parse(JSON.stringify(this.props.rows[0]));
   }
 
   shouldComponentUpdate(nextProps) {
@@ -58,35 +64,43 @@ class TableHeader extends Component{
   onMouseMove=(event,data)=>{
     if(this.border)return; 
     const {clsPrefix} = this.props; 
-    if(this.border){
-      let x = (event.pageX - this.drag.initPageLeftX) + this.drag.initLeft;
-    }else{
-      event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`;
-    }
+    event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`;
   }
-
   onMouseOut=(event,data)=>{
     if(this.border)return;
     const {clsPrefix} = this.props;
     event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap`;
   }
- 
   onMouseDown=(event,data)=>{
     this.border = true;
     const {clsPrefix} = this.props; 
-    event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`;
-    
     this.drag.initPageLeftX = event.pageX;
     this.drag.initLeft = tryParseInt(event.target.style.left);
     this.drag.x = this.drag.initLeft;
+    this.drag.currIndex = this.props.rows[0].findIndex(da=>da.key==data.key);
+    this.drag.width = this.drag.data[this.drag.currIndex].width;
   }
-
   onMouseUp=(event,data)=>{
     this.border = false;
     const {clsPrefix} = this.props;
     event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap`;
-    let endx = (event.pageX-this.dragBorderObj.initPageLeftX);
-    // event.target.offsetWidth
+  }
+  onThMouseUp=(event,data)=>{
+    this.border = false;
+  }
+   
+  onThMouseMove=(event,data)=>{ 
+    if(!this.border)return;
+    let x = (event.pageX - this.drag.initPageLeftX) + this.drag.initLeft-0;
+    //设置hiden的left
+    let currentHideDom = document.getElementById("u-table-drag-hide-table").getElementsByTagName("div")[this.drag.currIndex];
+    currentHideDom.style.left =  (this.drag.initPageLeftX+x-16)+"px"; 
+    //设置当前的宽度 
+    let  currentData = this.drag.data[this.drag.currIndex]; 
+    currentData.width = this.drag.width + x; 
+    let  currentDom = document.getElementById("u-table-drag-thead").getElementsByTagName("th")[this.drag.currIndex];
+    currentDom.style.width = (currentData.width)+"px"; 
+    this.drag.x = x; 
   }
  
   render() {
@@ -94,7 +108,7 @@ class TableHeader extends Component{
       onMouseDown,onMouseMove,onMouseUp,dragborder,onMouseOut
       } = this.props;
     return (
-      <thead className={`${clsPrefix}-thead`}>
+      <thead className={`${clsPrefix}-thead`} id="u-table-drag-thead">
         {
           rows.map((row, index) => (
             <tr key={index} style={rowStyle}>
@@ -112,15 +126,9 @@ class TableHeader extends Component{
                     key={da.key} />)
                 }else if(dragborder){
                     return(<th
-                      // onDragStart={(event)=>{this.onDragGapStart(event,da)}} 
-                      // onDragOver={(event)=>{this.onDragGapOver(event,da)}}
-                      // onDrop={(event)=>{this.onDropGap(event,da)}} 
-                      // onDragEnter={(event)=>{this.onDragGapEnter(event,da)}}
-
-                    // onMouseDown={(event)=>{onMouseDown(event,da)}}
-                   
-                    // onMouseUp={(event)=>{onMouseUp(event,da)}}
-                    // {...da}
+                    style={{width:da.width}}
+                    onMouseMove={(event)=>{this.onThMouseMove(event,da)}}
+                    onMouseUp={(event)=>{this.onThMouseUp(event,da)}}
                     className={`${da.className} ${clsPrefix}-thead-th `}
                     key={i} >
                       {da.children}

src/lib/dragColumn.js

@@ -4,8 +4,6 @@ import Checkbox from "bee-checkbox";
 import ReactDOM from 'react-dom';
 import Popover from 'bee-popover';
 import {sortBy} from './util';
-// import createColResizable from '../resiztable'
-// import Table from './Table';
 /**
  * 参数: 列拖拽
  * @param {*} Table
@@ -18,8 +16,6 @@ export default function dragColumn(Table) {
     constructor(props) {
       super(props);
       const {columns} = props;
-      this.dragBorderObj = {startScreenX:0,endScreenX:0};
-      this.mouse = false;
       this.setColumOrderByIndex(columns);
     }
 
@@ -29,17 +25,6 @@ export default function dragColumn(Table) {
       }
     }
  
-    // componentDidMount() {
-    //   const domElemTableList = document.querySelectorAll('table');
-    //    createColResizable(domElemTableList[0], {
-    //     liveDrag: true
-    //   });
-    //   createColResizable(domElemTableList[1], {
-    //     liveDrag: false,
-    //     headerOnly: false
-    //   });
-    // }
-
     setColumOrderByIndex = (columns)=>{
       let _column = [];
       Object.assign(_column,columns); 
@@ -93,52 +78,20 @@ export default function dragColumn(Table) {
       });
     }
  
-    onMouseDown=(event,data)=>{
-      this.mouse = true; 
-      this.dragBorderObj.startScreenX = event.screenX;
-    }
-    onMouseMove=(event,data)=>{
-      if(!this.mouse)return;
-      let endx = (event.screenX-this.dragBorderObj.startScreenX);
-      let {columns:_columns} = this.state;
-      let columns = [];
-      Object.assign(columns,_columns); 
-      // let currentIndex = columns.findIndex((_da,i)=>_da.key == data.key);
-      // currentIndex = currentIndex==0?currentIndex:(currentIndex-1);
-
-      let currObj =  columns.find((_da,i)=>_da.key == data.key);
-      if(!currObj)return;
-      currObj.width = currObj.width?(currObj.width+endx):endx; 
-      this.setState({
-        columns
-      });
-    }
-
     getTarget=(evt)=>{
         return evt.target || evt.srcElement;
     }
 
-    onMouseUp=(event,data)=>{
-      let endx = (event.screenX-this.dragBorderObj.startScreenX); 
-      this.mouse = false;
-      
-    }
-
     render() {
       const {data,dragborder,draggable,className} = this.props;
       const {columns} = this.state;
-
-      
       return (<Table {...this.props} columns={columns} data={data} className={`${className} u-table-drag-border`}
           onDragStart={this.onDragStart} onDragOver={this.onDragOver} onDrop={this.onDrop} 
           onDragEnter={this.onDragEnter}
           draggable={draggable}
 
           dragborder={true}
-          onMouseDown={this.onMouseDown}
-          onMouseMove={this.onMouseMove}
-          onMouseUp={this.onMouseUp}
-      />)
+          />)
     }
   };
 }