Merge branch 'ne-drag' of github.com:tinper-bee/bee-table into ne-drag

build/Table.css

@@ -393,14 +393,10 @@
         margin: 0 auto; }
       .u-table-thead-th-drag-gap .online-hover {
         background: #000000; }
-    .u-table-thead-th .th-drag-gap {
-      background: transparent; }
-    .u-table-thead-th .th-drag-gap-hover {
+    .u-table-thead-th-drag-gap:hover {
       cursor: col-resize; }
-    .u-table-thead-th .th-drag-gap > div {
-      background: transparent; }
-    .u-table-thead-th .th-drag-gap-hover > div {
-      background: #000000; }
+      .u-table-thead-th-drag-gap:hover .online {
+        background: #000000; }
   .u-table-thead-th:last-child-drag-gap {
     border: none; }
   .u-table-filter-column-pop-cont {

build/TableHeader.js

@@ -10,6 +10,10 @@ var _react = require("react");
 
 var _react2 = _interopRequireDefault(_react);
 
+var _reactDom = require("react-dom");
+
+var _reactDom2 = _interopRequireDefault(_reactDom);
+
 var _propTypes = require("prop-types");
 
 var _propTypes2 = _interopRequireDefault(_propTypes);
@@ -52,247 +56,136 @@ var TableHeader = function (_Component) {
 
     var _this = _possibleConstructorReturn(this, _Component.call(this, props));
 
-    _this.onDragStart = function (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);
-    };
-
-    _this.onDragOver = function (event, data) {
-      var dragAbleOrBordStart = _this.state.dragAbleOrBordStart;
-
-      _this.setState({
-        dragAbleOrBordStart: ""
-      });
-      if (!_this.currentObj || _this.currentObj.key == data.key) return;
-      event.preventDefault();
-      _this.props.onDragOver(event, data);
-    };
-
-    _this.onDragEnter = function (event, data) {
-      if (!_this.currentObj || _this.currentObj.key == data.key) return;
-      _this.props.onDragEnter(event, data);
-    };
-
-    _this.onDrop = function (event, data) {
-      if (!_this.currentObj || _this.currentObj.key == data.key) return;
-      _this.props.onDrop(event, data);
-    };
-
-    _this.onMouseOver = function (event, data) {
-      //如果是固定列没有拖拽功能
-      if (_this.border || data.fixed) return;
-      var clsPrefix = _this.props.clsPrefix;
-
-      if (event.target.id != 'th-online') {
-        event.target.className = clsPrefix + "-thead-th-drag-gap th-drag-gap-hover";
-      }
-    };
-
-    _this.ableOnMouseMove = function (event, data) {
-      var dragAbleOrBord = _this.state.dragAbleOrBord;
-
-      if (dragAbleOrBord === "borderStart" || dragAbleOrBord === "ableStart") return;
-      if (dragAbleOrBord === "able") return;
-      _this.setState({
-        dragAbleOrBord: "able"
-      });
-    };
-
-    _this.onMouseMove = function (event, data) {
-      var dragAbleOrBord = _this.state.dragAbleOrBord;
-
-      if (dragAbleOrBord === "borderStart" || dragAbleOrBord === "ableStart") return;
-      if (dragAbleOrBord != "border") {
-        _this.setState({
-          dragAbleOrBord: "border"
-        });
-      }
-      //如果是固定列没有拖拽功能
-      if (_this.border || data.fixed) return;
-      // const {clsPrefix} = this.props;
-      // event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`;
-    };
-
-    _this.onMouseOut = function (event, data) {
-      if (_this.border) return;
-      var clsPrefix = _this.props.clsPrefix;
-
-      if (event.target.id != 'th-online') {
-        event.target.className = clsPrefix + "-thead-th-drag-gap th-drag-gap";
-      }
-    };
-
-    _this.onMouseDown = function (event, data) {
-      var _this$state = _this.state,
-          dragAbleOrBord = _this$state.dragAbleOrBord,
-          dragAbleOrBordStart = _this$state.dragAbleOrBordStart;
-
-      _this.setState({
-        dragAbleOrBordStart: dragAbleOrBord === "border" ? "borderStart" : ""
-      });
-      // console.log("-改变宽-----度--",dragAbleOrBordStart);
-      _this.border = true;
+    _this.onLineMouseMove = function (e) {
       var _this$props = _this.props,
           clsPrefix = _this$props.clsPrefix,
-          contentTable = _this$props.contentTable;
+          dragborder = _this$props.dragborder,
+          contentDomWidth = _this$props.contentDomWidth,
+          scrollbarWidth = _this$props.scrollbarWidth,
+          contentTable = _this$props.contentTable,
+          headerScroll = _this$props.headerScroll;
 
-      _this.drag.initPageLeftX = event.pageX;
-      _this.drag.initLeft = (0, _utils.tryParseInt)(event.target.style.left);
-      _this.drag.x = _this.drag.initLeft;
-      _this.drag.currIndex = _this.props.rows[0].findIndex(function (da) {
-        return da.key == data.key;
-      });
-
-      var contentTableDom = document.getElementById("u-table-drag-thead-" + _this.theadKey).parentNode;
-      var styleWidth = contentTableDom.style.width;
-      if (styleWidth && (typeof styleWidth == "number" || styleWidth.includes("px"))) {
-        _this.contentTableWidth = parseInt(styleWidth);
-      } else {
-        _this.contentTableWidth = parseInt(contentTableDom.scrollWidth);
+      _utils.Event.stopPropagation(e);
+      var event = _utils.Event.getEvent(e);
+      if (!_this.props.dragborder) return;
+      if (_this.drag.option != "border") {
+        return false;
       }
-      var dragColWidth = _this.drag.data[_this.drag.currIndex].width;
-      if (typeof dragColWidth == "string" && dragColWidth.indexOf("%") > -1) {
-        _this.drag.width = _this.contentTableWidth * parseInt(dragColWidth) / 100;
-      } else {
-        _this.drag.width = parseInt(_this.drag.data[_this.drag.currIndex].width);
+      //移动改变宽度
+      var currentCols = _this.table.cols[_this.drag.currIndex];
+      var diff = event.x - _this.drag.oldLeft;
+      var newWidth = _this.drag.oldWidth + diff;
+      if (newWidth > _this.drag.minWidth) {
+        currentCols.style.width = newWidth + 'px';
+        //hao 支持固定表头拖拽 修改表体的width
+        if (_this.fixedTable.cols) {
+          _this.fixedTable.cols[_this.drag.currIndex].style.width = newWidth + "px";
+        }
+
+        //表头滚动条处理
+        if (headerScroll) {
+          var oldTableWidth = parseInt(_this.table.table.style.width ? _this.table.table.style.width : _this.table.table.scrollWidth);
+          var newTableWidth = oldTableWidth + diff;
+          _this.table.table.style.width = newTableWidth; //改变table的width
+
+          var showScroll = contentDomWidth - newTableWidth - scrollbarWidth;
+          // if(bordered){
+          //     showScroll = showScroll -1;
+          // }
+          var fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');
+          var fixedRighHeadertTable = contentTable.querySelector('.u-table-fixed-right .u-table-header');
+          var contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
+          if (showScroll < 0) {
+            //找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
+            contentTableHeader.style.overflowX = 'scroll';
+            fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = scrollbarWidth + "px");
+            fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = scrollbarWidth + "px");
+          } else {
+            contentTableHeader.style.overflowX = 'hidden';
+            fixedLeftHeaderTable && (fixedLeftHeaderTable.style.marginBottom = '0px');
+            fixedRighHeadertTable && (fixedRighHeadertTable.style.marginBottom = '0px');
+          }
+        }
       }
     };
 
-    _this.onMouseUp = function (event, data) {
-      _this.setState({
-        dragAbleOrBordStart: ""
-      });
-      _this.border = false;
-      var clsPrefix = _this.props.clsPrefix;
-
-      event.target.className = clsPrefix + "-thead-th-drag-gap th-drag-gap";
-    };
-
-    _this.onThMouseUp = function (event, data) {
-      _this.border = false;
+    _this.onLineMouseDown = function (e) {
+      _utils.Event.stopPropagation(e);
+      var event = _utils.Event.getEvent(e);
       var _this$props2 = _this.props,
           clsPrefix = _this$props2.clsPrefix,
-          rows = _this$props2.rows,
-          columns = _this$props2.columns;
+          contentTable = _this$props2.contentTable;
 
-      var eventDom = event.target;
-      var optDom = void 0;
-      if (eventDom.classList.contains(".th-drag-gap-hover")) {
-        optDom = eventDom;
-      } else {
-        optDom = eventDom.querySelector("." + clsPrefix + "-thead-th-drag-gap");
-      }
-      if (optDom) {
-        optDom.classList.remove("th-drag-gap-hover");
-        optDom.classList.add("th-drag-gap");
-      }
-      // columns[this.drag.currIndex].width = data.width;
-      //宽度拖拽后，增加回调函数，外部可以记录宽度
-      if (typeof _this.props.afterDragColWidth == "function" && rows && rows[0] && _this.drag.currIndex) {
-        _this.props.afterDragColWidth(rows[0], _this.drag.currIndex);
-      }
+      if (!_this.props.dragborder) return;
+      var currentIndex = parseInt(_utils.Event.getTarget(event).getAttribute("data-line-index"));
+      var defaultWidth = _utils.Event.getTarget(event).getAttribute("data-th-width");
+      var currentObj = _this.table.cols[currentIndex];
+      _this.drag.option = "border"; //拖拽操作
+      _this.drag.currIndex = currentIndex;
+      _this.drag.oldLeft = event.x;
+      _this.drag.oldWidth = parseInt(currentObj.style.width);
+      _this.drag.minWidth = currentObj.style.minWidth != "" ? parseInt(currentObj.style.minWidth) : defaultWidth;
     };
 
-    _this.onThMouseMove = function (event, data) {
-      if (!_this.border) return;
-      //固定表头拖拽
+    _this.onLineMouseUp = function (event) {
+      var rows = _this.props.rows;
 
-      var _this$props3 = _this.props,
-          dragborderKey = _this$props3.dragborderKey,
-          contentTable = _this$props3.contentTable,
-          headerScroll = _this$props3.headerScroll,
-          contentDomWidth = _this$props3.contentDomWidth,
-          scrollbarWidth = _this$props3.scrollbarWidth,
-          bordered = _this$props3.bordered,
-          rows = _this$props3.rows;
+      var data = { rows: rows[0], cols: _this.table.cols, currIndex: _this.drag.currIndex };
+      _this.props.afterDragColWidth && _this.props.afterDragColWidth(data);
+      _this.clearDragBorder(event);
+    };
 
-      var x = event.pageX - _this.drag.initPageLeftX + _this.drag.initLeft - 0;
-      var contentTableDom = document.getElementById("u-table-drag-thead-" + _this.theadKey).parentNode;
+    _this.bodyonLineMouseMove = function (event) {
+      _this.clearDragBorder(event);
+    };
 
-      if (!_this.contentTableWidth) {
-        var styleWidth = contentTableDom.style.width;
-        if (styleWidth && (typeof styleWidth == "number" || styleWidth.includes("px"))) {
-          _this.contentTableWidth = parseInt(styleWidth);
-        } else {
-          _this.contentTableWidth = parseInt(contentTableDom.scrollWidth);
-        }
-      }
-      var newTableWidth = _this.contentTableWidth + x;
-      var newWidth = _this.drag.width + x;
-      if (newWidth < _this.props.minColumnWidth) {
-        //清楚样式
-        var moveDom = event.target.querySelector(".th-drag-gap-hover");
-        moveDom && moveDom.classList.remove("th-drag-gap-hover");
-        // event.target.classList.remove('th-drag-gap-hover');
+    _this.dragAbleMouseDown = function (e) {
+      _utils.Event.stopPropagation(e);
+      var event = _utils.Event.getEvent(e);
+      if (!_this.props.draggable) return;
+      event.target.setAttribute('draggable', true); //添加交换列效果
+      _this.drag.option = 'dragAble';
+      _this.removeDragBorderEvent(); //清理掉拖拽列宽的事件
+      _this.addDragAbleEvent(); //添加拖拽交换列的事件
+    };
+
+    _this.onDragStart = function (e) {
+      var event = _utils.Event.getEvent(e);
+      if (!_this.props.draggable) return;
+      if (_this.drag.option === 'border') {
         return;
       }
-      //设置hiden的left
-      //"u-table-drag-hide-table"
-      var currentHideDom = document.getElementById("u-table-drag-hide-table-" + dragborderKey).getElementsByTagName("div")[_this.drag.currIndex];
-      currentHideDom.style.left = _this.drag.initPageLeftX + x - grap + "px";
+      var currentIndex = parseInt(_utils.Event.getTarget(event).getAttribute("data-line-index"));
 
-      //获取最小宽度，不让拖动
-      // let minWidth = 0;
-      // for(let i=0;i<=this.drag.currIndex;i++){
-      //   minWidth += this.drag.data[i].width;
-      // }
+      var currentKey = event.target.getAttribute('data-line-key');
+      event.dataTransfer.effectAllowed = "move";
+      event.dataTransfer.setData("Text", currentKey);
+      _this.currentObj = _this.props.rows[0][currentIndex];
+      event.dataTransfer.setDragImage(event.target, 0, 0);
+    };
 
-      // //判断最小值后在赋值 todo
-      // let currLeft = this.drag.initPageLeftX+x-grap;
-      // console.log("currLeft minWidth ",currLeft + " "+minWidth);
-      // if(currLeft <= minWidth){
-      //   return;
-      // }
-      // currentHideDom.style.left =  currLeft+"px";
+    _this.onDragOver = function (e) {
+      event.preventDefault();
+    };
 
-      //设置当前的宽度
-      var currentData = _this.drag.data[_this.drag.currIndex];
-      currentData.width = newWidth;
-      var currentDom = document.getElementById("u-table-drag-thead-" + _this.theadKey).getElementsByTagName("th")[_this.drag.currIndex];
-      currentDom.style.width = newWidth + "px";
-      // this.contentTableWidth = newTableWidth;
-      contentTableDom.style.width = newTableWidth + "px";
-      // data.width = newWidth;
-      rows[0][_this.drag.currIndex].width = newWidth;
-      _this.drag.x = x;
-      var contentColDomArr = contentTableDom.querySelectorAll("colgroup col");
-      contentColDomArr[_this.drag.currIndex].style.width = newWidth + "px";
-      //固定表头时，表头和表体分开，拖拽时表体的宽度也需要一起联动
-      var siblingDom = contentTableDom.parentNode.nextElementSibling;
-      if (siblingDom) {
-        var bodyTableDom = siblingDom.querySelector("table");
-        //2、是的话将表头对应的表格的宽度给表体对应的表格的宽度
-        bodyTableDom.style.width = newTableWidth + "px";
-        //3、对应的col也要跟这变
-        var colDomArr = bodyTableDom.querySelectorAll("colgroup col");
-        colDomArr[_this.drag.currIndex].style.width = newWidth + "px";
-        //4、设置overflow属性
+    _this.onDragEnter = function (e) {
+      if (!_this.props.draggable) return;
+      if (_this.drag.option === 'border') {
+        return;
       }
+      var data = _this.getCurrentEventData(e);
+      if (!_this.currentObj || _this.currentObj.key == data.key) return;
+    };
 
-      //表头需要显示滚动条时，需兼容含有固定列
-      if (headerScroll) {
-
-        var showScroll = contentDomWidth - newTableWidth - scrollbarWidth;
-        if (bordered) {
-          showScroll = showScroll - 1;
-        }
-        var fixedLeftTable = contentTable.querySelector('.u-table-fixed-left .u-table-header');
-        var fixedRightTable = contentTable.querySelector('.u-table-fixed-rigth .u-table-header');
-        var contentTableHeader = contentTable.querySelector('.u-table-scroll .u-table-header');
-        if (showScroll < 0) {
-          //找到固定列表格，设置表头的marginBottom值为scrollbarWidth;
-          contentTableHeader.style.overflowX = 'scroll';
-          fixedLeftTable && (fixedLeftTable.style.marginBottom = scrollbarWidth + "px");
-          fixedRightTable && (fixedRightTable.style.marginBottom = scrollbarWidth + "px");
-        } else {
-          contentTableHeader.style.overflowX = 'hidden';
-          fixedLeftTable && (fixedLeftTable.style.marginBottom = '0px');
-          fixedRightTable && (fixedRightTable.style.marginBottom = '0px');
-        }
+    _this.onDrop = function (e) {
+      if (!_this.props.draggable) return;
+      if (_this.drag.option === 'border') {
+        return;
       }
+      var data = _this.getCurrentEventData(e);
+      if (!_this.currentObj || _this.currentObj.key == data.key) return;
+      if (!_this.props.onDrop) return;
+      _this.props.onDrop(event, { dragSource: _this.currentObj, dragTarg: data });
     };
 
     _this.handlerFilterTextChange = function (key, val) {
@@ -312,11 +205,11 @@ var TableHeader = function (_Component) {
     };
 
     _this.filterRenderType = function (type, dataIndex, index) {
-      var _this$props4 = _this.props,
-          clsPrefix = _this$props4.clsPrefix,
-          rows = _this$props4.rows,
-          filterDelay = _this$props4.filterDelay,
-          locale = _this$props4.locale;
+      var _this$props3 = _this.props,
+          clsPrefix = _this$props3.clsPrefix,
+          rows = _this$props3.rows,
+          filterDelay = _this$props3.filterDelay,
+          locale = _this$props3.locale;
 
       switch (type) {
         //文本输入
@@ -407,13 +300,6 @@ var TableHeader = function (_Component) {
     };
 
     _this.currentObj = null;
-    _this.state = {
-      border: false,
-      dragAbleOrBord: props.draggable ? "able" : "", //border 拖拽列宽，able 交换列,
-      dragAbleOrBordStart: "" // borderStart 开始拖拽宽度 ableStart 开始交换列
-
-      // draggable:props.draggable?props.draggable:false,
-    };
     //拖拽宽度处理
     if (!props.dragborder) return _possibleConstructorReturn(_this);
     _this.border = false;
@@ -422,13 +308,10 @@ var TableHeader = function (_Component) {
       initPageLeftX: 0,
       initLeft: 0,
       x: 0,
-      width: 0
+      width: 0,
+      option: ''
     };
-    // let _da = {};
-    // Object.assign(_da,this.props.rows[0]);
-    // this.drag.data = JSON.parse(JSON.stringify(this.props.rows[0]));
-    // let a = this.props.rows[0];
-
+    _this.table = null;
     var _row = [];
     _this.props.rows[0] && _this.props.rows[0].forEach(function (item) {
       var newItem = item.key != "checkbox" ? (0, _utils.ObjectAssign)(item) : item;
@@ -438,25 +321,174 @@ var TableHeader = function (_Component) {
     return _this;
   }
 
-  TableHeader.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
-    if (this.props.draggable != nextProps.draggable) {
-      this.setState({
-        dragAbleOrBord: nextProps.draggable ? "able" : "" //border 拖拽列宽，able 交换列
-        // draggable:nextProps.draggable,
-      });
-    }
+  /**
+   * 动态绑定th line 事件
+   * type 为false 为增加事件
+   * eventSource 为false 给 th 内部的div增加事件
+   */
+  TableHeader.prototype.thEventListen = function thEventListen(events, type, eventSource) {
+    var _table = this.table,
+        ths = _table.ths,
+        cols = _table.cols;
 
-    if (this.props.dragborder != nextProps.dragborder) {
-      this.setState({
-        dragAbleOrBord: nextProps.dragborder ? "border" : "" //border 拖拽列宽，able 交换列
-      });
+    for (var index = 0; index < ths.length; index++) {
+      var element = ths[index]; //.getAttribute('data-type');
+      if (!element.getAttribute('data-th-fixed')) {
+        var colLine = element.children.length > 1 ? element.lastElementChild : element.children[0];
+        // const colLine = element.children[0];
+        for (var i = 0; i < events.length; i++) {
+          var _event = events[i];
+          var _dataSource = eventSource ? element : colLine;
+          if (type === "remove") {
+            _dataSource.removeEventListener(_event.key, _event.fun);
+          } else {
+            _dataSource.addEventListener(_event.key, _event.fun);
+          }
+        }
+      }
     }
   };
 
-  // shouldComponentUpdate(nextProps) {
-  //   return !shallowequal(nextProps, this.props);
-  // }
+  TableHeader.prototype.bodyEventListen = function bodyEventListen(events, type) {
+    for (var i = 0; i < events.length; i++) {
+      var _event = events[i];
+      if (type == "remove") {
+        document.removeEventListener(_event.key, _event.fun);
+      } else {
+        document.addEventListener(_event.key, _event.fun);
+      }
+    }
+  };
 
+  TableHeader.prototype.componentDidUpdate = function componentDidUpdate() {
+    this.initTable();
+    this.initEvent();
+  };
+
+  TableHeader.prototype.componentDidMount = function componentDidMount() {
+    this.initTable();
+    this.initEvent();
+  };
+
+  /**
+   * 拖拽列宽的事件处理
+   */
+
+
+  TableHeader.prototype.initEvent = function initEvent() {
+    var events = [{ key: 'mouseup', fun: this.onLineMouseUp }, { key: 'mousemove', fun: this.onLineMouseMove }];
+
+    if (this.props.dragborder) {
+      this.thEventListen(events, '', true); //表示把事件添加到th元素上
+      this.thEventListen([{ key: 'mousedown', fun: this.onLineMouseDown }]); //表示把事件添加到竖线
+      this.bodyEventListen([{ key: 'mouseup', fun: this.bodyonLineMouseMove }]);
+    }
+    if (!this.props.draggable) return;
+    //拖拽交换列事件
+    this.thEventListen([{ key: 'mousedown', fun: this.dragAbleMouseDown }], '', true); //表示把事件添加到竖线
+  };
+
+  /**
+   * 移除拖拽宽度的事件
+   */
+
+
+  TableHeader.prototype.removeDragBorderEvent = function removeDragBorderEvent() {
+    var events = [{ key: 'mouseup', fun: this.onLineMouseUp }, { key: 'mousemove', fun: this.onLineMouseMove }];
+    this.thEventListen(events, 'remove', true); //表示把事件添加到th元素上
+    this.thEventListen([{ key: 'mousedown', fun: this.onLineMouseDown }], 'remove'); //表示把事件添加到竖线
+    this.bodyEventListen([{ key: 'mouseup', fun: this.bodyonLineMouseMove }], 'remove');
+  };
+
+  /**
+   * 获取table的属性存放在this.table 中。(公用方法)
+   */
+
+
+  TableHeader.prototype.initTable = function initTable() {
+    if (!this.props.dragborder && !this.props.draggable) return;
+    var el = _reactDom2["default"].findDOMNode(this);
+    var tableDome = el.parentNode;
+    var table = {};
+    if (tableDome && tableDome.nodeName && tableDome.nodeName.toUpperCase() == "TABLE") {
+      table.table = tableDome;
+      table.cols = tableDome.getElementsByTagName("col");
+      table.ths = tableDome.getElementsByTagName("th");
+    }
+    this.table = table;
+
+    if (!this.props.dragborder) return;
+    if (document.getElementById("u-table-drag-thead-" + this.theadKey)) {
+      //hao 固定列table
+      this.fixedTable = {};
+      var _fixedParentContext = document.getElementById("u-table-drag-thead-" + this.theadKey).parentNode;
+      var siblingDom = _fixedParentContext.parentNode.nextElementSibling;
+      if (siblingDom) {
+        var fixedTable = siblingDom.querySelector("table");
+        this.fixedTable.table = fixedTable;
+        this.fixedTable.cols = fixedTable.getElementsByTagName("col");
+        // this.fixedTable.ths = fixedTable.tableDome.getElementsByTagName("th");
+      }
+    }
+  };
+
+  //---拖拽列宽代码逻辑----start-----
+
+
+  TableHeader.prototype.clearDragBorder = function clearDragBorder() {
+    if (!this.props.dragborder) return;
+
+    this.drag = {
+      option: ""
+    };
+  };
+
+  //---拖拽列宽代码逻辑----start-----
+
+  /**
+   * 拖拽交换列的事件处理
+   */
+  TableHeader.prototype.addDragAbleEvent = function addDragAbleEvent() {
+    var events = [{ key: 'dragstart', fun: this.onDragStart }, //用户开始拖动元素时触发
+    { key: 'dragover', fun: this.onDragOver }, //当某被拖动的对象在另一对象容器范围内拖动时触发此事件
+    { key: 'drop', fun: this.onDrop }, //在一个拖动过程中，释放鼠标键时触发此事件 
+    { key: 'dragenter', fun: this.onDragEnter //当被鼠标拖动的对象进入其容器范围内时触发此事件
+    }];
+    this.thEventListen(events, '', true);
+    // this.bodyEventListen([{key:'mouseup',fun:this.bodyonDragMouseMove}]);
+  };
+
+  TableHeader.prototype.removeDragAbleEvent = function removeDragAbleEvent() {
+    var events = [{ key: 'dragstart', fun: this.onDragStart }, { key: 'dragover', fun: this.onDragOver }, { key: 'drop', fun: this.onDrop }, { key: 'dragenter', fun: this.onDragEnter }];
+    this.thEventListen(events, 'remove', true);
+  };
+
+  /**
+   * 当被鼠标拖动的对象进入其容器范围内时触发此事件。【目标事件】
+   * @memberof TableHeader
+   */
+
+
+  /**
+   * 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】
+   * @memberof TableHeader
+   */
+
+
+  TableHeader.prototype.getCurrentEventData = function getCurrentEventData(e) {
+    var event = _utils.Event.getEvent(e);
+    var key = event.target.getAttribute('data-line-key');
+    var data = this.props.rows[0].find(function (da) {
+      return da.key == key;
+    });
+    if (data) {
+      return data;
+    } else {
+      console.log(" getCurrentEventData data is null ");
+      return null;
+    }
+  };
+  //---拖拽列交换----end----- 
   /**
    * @description 过滤输入后的回调函数
    */
@@ -473,9 +505,6 @@ var TableHeader = function (_Component) {
   TableHeader.prototype.render = function render() {
     var _this2 = this;
 
-    var _state = this.state,
-        dragAbleOrBord = _state.dragAbleOrBord,
-        dragAbleOrBordStart = _state.dragAbleOrBordStart;
     var _props = this.props,
         clsPrefix = _props.clsPrefix,
         rowStyle = _props.rowStyle,
@@ -500,12 +529,12 @@ var TableHeader = function (_Component) {
 
     return _react2["default"].createElement(
       "thead",
-      _extends({ className: clsPrefix + "-thead" }, attr),
+      _extends({ className: clsPrefix + "-thead" }, attr, { "data-theader-fixed": "scroll" }),
       rows.map(function (row, index) {
         return _react2["default"].createElement(
           "tr",
           { key: index, style: rowStyle, className: filterable && index == rows.length - 1 ? 'filterable' : '' },
-          row.map(function (da, i, arr) {
+          row.map(function (da, columIndex, arr) {
             var thHover = da.drgHover ? " " + clsPrefix + "-thead th-drag-hover" : "";
             delete da.drgHover;
             var fixedStyle = "";
@@ -514,128 +543,48 @@ var TableHeader = function (_Component) {
               fixedStyle = clsPrefix + "-row-fixed-columns-in-body";
             }
 
-            if (lastShowIndex == i) {
+            if (lastShowIndex == columIndex) {
               canDotDrag = "th-can-not-drag";
             }
             if (filterable && index == rows.length - 1) {
-              da.children = _this2.filterRenderType(da["filtertype"], da.dataindex, i);
+              da.children = _this2.filterRenderType(da["filtertype"], da.dataindex, columIndex);
               delete da.filterdropdownfocus;
             }
 
-            var thAbleObj = {},
-                thBorObj = {},
-                thDefaultObj = {},
-                thLineObj = {};
+            var thDefaultObj = {};
             var thClassName = "" + da.className;
-            if (draggable || dragborder) {
-              if (draggable && dragAbleOrBordStart != "borderStart") {
-                thAbleObj = _extends({}, da, {
-                  onDragStart: function onDragStart(e) {
-                    _this2.onDragStart(e, da);
-                  },
-                  onDragOver: function onDragOver(e) {
-                    _this2.onDragOver(e, da);
-                  },
-                  onDrop: function onDrop(e) {
-                    _this2.onDrop(e, da);
-                  },
-                  onDragEnter: function onDragEnter(e) {
-                    _this2.onDragEnter(e, da);
-                  },
-                  onMouseMove: function onMouseMove(e) {
-                    _this2.ableOnMouseMove(e, da);
-                  },
-                  onMouseDown: function onMouseDown(e) {
-                    //避免表头其他元素对其影响
-                    var filterDom = contentTable.querySelector('.filterable');
-                    //是否是过滤行元素，是的话不触发
-                    var isFilterDom = filterDom ? filterDom.contains(e.target) : false;
-
-                    if (e.target.classList.contains('uf') || isFilterDom) {
-                      return;
-                    }
-                    if (e.target.classList.contains('uf')) {
-                      return;
-                    }
-                    var _state2 = _this2.state,
-                        dragAbleOrBord = _state2.dragAbleOrBord,
-                        dragAbleOrBordStart = _state2.dragAbleOrBordStart;
-
-                    _this2.setState({
-                      dragAbleOrBordStart: dragAbleOrBord === "able" ? "ableStart" : ""
-                    });
-                  },
-                  draggable: draggable,
-                  // className:thObj.className+`${clsPrefix}-thead th-drag ${thHover}`,
-                  key: da.key
-                });
-                thClassName += clsPrefix + "-thead th-drag " + thHover + " ";
-              }
-              // if (dragborder && dragAbleOrBord === "border") {
-              if (dragborder && dragAbleOrBordStart != "ableStart") {
-                thBorObj.style = { 'width': da.width
-                  // thObj.className= thObj.className+`${clsPrefix}-thead-th ${canDotDrag}`,
-                };thBorObj.onMouseMove = function (e) {
-                  if (draggable) {
-                    _this2.ableOnMouseMove(e, da);
-                  }
-                  _this2.onThMouseMove(e, da);
-                };
-                thBorObj.onMouseUp = function (e) {
-                  _this2.onThMouseUp(e, da);
-                };
-
-                thClassName += clsPrefix + "-thead-th " + canDotDrag;
-                thBorObj.style = { width: da.width
-                  // key:i
-                };
-              }
-              // thObj.className = thObj.className+`${fixedStyle}`;
-              thClassName += "" + fixedStyle;
-              if (!da.fixed) {
-                thLineObj = {
-                  onMouseMove: function onMouseMove(e) {
-                    e.stopPropagation();_this2.onMouseMove(e, da);
-                  },
-                  onMouseOut: function onMouseOut(e) {
-                    _this2.onMouseOut(e, da);
-                  },
-                  onMouseDown: function onMouseDown(e) {
-                    e.stopPropagation();_this2.onMouseDown(e, da);
-                  },
-                  onMouseUp: function onMouseUp(e) {
-                    _this2.onMouseUp(e, da);
-                  },
-                  onMouseOver: function onMouseOver(e) {
-                    _this2.onMouseOver(e, da);
-                  }
-                  // className:`${clsPrefix}-thead-th-drag-gap th-drag-gap`,
-                };
-                if (dragAbleOrBordStart !== 'ableStart') {
-                  thLineObj.className = clsPrefix + "-thead-th-drag-gap th-drag-gap";
-                }
-              }
+            if (draggable) {
+              thClassName += clsPrefix + "-thead th-drag " + thHover + " ";
+            }
+            if (dragborder) {
+              thClassName += clsPrefix + "-thead-th " + canDotDrag;
+            }
+            thClassName += "" + fixedStyle;
+            if (!da.fixed) {
               return _react2["default"].createElement(
                 "th",
-                _extends({ key: Math.random() + new Date().getTime() }, thAbleObj, thBorObj, { className: thClassName }),
+                { key: Math.random() + new Date().getTime(), className: thClassName, "data-th-fixed": da.fixed,
+                  "data-line-key": da.key, "data-line-index": columIndex, "data-th-width": da.width },
                 da.children,
-                da.fixed ? "" : _react2["default"].createElement(
+                dragborder ? _react2["default"].createElement(
                   "div",
-                  _extends({ ref: function ref(el) {
+                  { ref: function ref(el) {
                       return _this2.gap = el;
-                    } }, thLineObj),
-                  _react2["default"].createElement("div", { id: "th-online", className: "online" })
-                )
+                    }, "data-line-key": da.key,
+                    "data-line-index": columIndex, "data-th-width": da.width,
+                    "data-type": "online", className: clsPrefix + "-thead-th-drag-gap" },
+                  _react2["default"].createElement("div", { id: "th-online", className: "online", "data-line-key": da.key, "data-line-index": columIndex, "data-th-width": da.width })
+                ) : ""
               );
             } else {
               thDefaultObj = _extends({}, da, {
                 className: da.className + " " + fixedStyle,
-                key: i
+                key: columIndex
               });
               da.onClick ? thDefaultObj.onClick = function (e) {
                 da.onClick(da, e);
               } : "";
-              return _react2["default"].createElement("th", thDefaultObj);
+              return _react2["default"].createElement("th", _extends({}, thDefaultObj, { "data-th-fixed": da.fixed }));
             }
           })
         );

build/lib/dragColumn.js

@@ -49,71 +49,30 @@ function dragColumn(Table) {
         return _column;
       };
 
-      _this.onDragStart = function (event, data) {
-        if (_this.props.onDragStart) {
-          _this.props.onDragStart(event, data);
-        }
-      };
-
-      _this.onDragOver = function (event, data) {
-        if (_this.props.onDragOver) {
-          _this.props.onDragOver(event, data);
-        }
-      };
-
-      _this.onDragEnter = function (event, data) {
-        if (data.key == "checkbox") return;
-        var _columns = _this.state.columns;
-
-        var columns = [];
-        _extends(columns, _columns);
-        columns.forEach(function (da) {
-          return da.drgHover = false;
-        });
-        var current = columns.find(function (da) {
-          return da.key == data.key;
-        });
-        if (current.fixed) return;
-        current.drgHover = true;
-        _this.setState({
-          columns: columns
-        });
-        if (_this.props.onDragEnter) {
-          _this.props.onDragEnter(event, data);
-        }
-      };
-
       _this.onDrop = function (event, data) {
-        if (data.key == "checkbox") return;
+        var dragSource = data.dragSource,
+            dragTarg = data.dragTarg;
         var columns = _this.state.columns;
 
-        var id = event.dataTransfer.getData("Text");
-        var objIndex = columns.findIndex(function (_da, i) {
-          return _da.key == id;
+        var dragSourceColum = columns.find(function (da, i) {
+          return da.key == dragSource.key;
         });
-        var targetIndex = columns.findIndex(function (_da, i) {
-          return _da.key == data.key;
+        var dragTargColum = columns.find(function (da, i) {
+          return da.key == dragTarg.key;
         });
-        if (columns[objIndex].fixed) return; //固定列不让拖拽
-        if (columns[targetIndex].fixed) return; //固定列不让拖拽
-        columns.forEach(function (da, i) {
-          da.drgHover = false;
-          if (da.key == id) {
-            //obj
-            da.dragIndex = targetIndex;
+
+        for (var index = 0; index < columns.length; index++) {
+          var da = columns[index];
+          if (da.key === dragSource.key) {
+            columns[index] = dragTargColum;
           }
-          if (da.key == data.key) {
-            //targetObj
-            da.dragIndex = objIndex;
+          if (da.key === dragTarg.key) {
+            columns[index] = dragSourceColum;
           }
-        });
-        var _columns = columns.sort((0, _util.compare)('dragIndex'));
-        _this.setState({
-          columns: _columns.slice()
-        });
-        if (_this.props.onDrop) {
-          _this.props.onDrop(event, data, columns);
         }
+        _this.setState({
+          columns: JSON.parse(JSON.stringify(columns))
+        });
       };
 
       _this.getTarget = function (evt) {

build/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tryParseInt = undefined;
+exports.Event = exports.tryParseInt = undefined;
 
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
@@ -186,4 +186,63 @@ function getColChildrenLength(columns, chilrenLen) {
     }
   });
   return chilrenLen;
-}
+}
+
+function addHandler(element, type, handler) {
+
+  if (element.addEventListener) {
+    //检测是否为DOM2级方法
+    element.addEventListener(type, handler, false);
+  } else if (element.attachEvent) {
+    //检测是否为IE级方法
+    element.attachEvent("on" + type, handler);
+  } else {
+    //检测是否为DOM0级方法
+    element["on" + type] = handler;
+  }
+}
+
+function removeHandler(element, type, handler) {
+  if (element.removeEventListener) {
+    element.removeEventListener(type, handler, false);
+  } else if (element.detachEvent) {
+    element.detachEvent("on" + type, handler);
+  } else {
+    element["on" + type] = null;
+  }
+}
+
+//获取事件对象的兼容性写法
+function getEvent(event) {
+  return event ? event : window.event;
+}
+
+//获取事件对象目标的兼容性写法
+function getTarget(event) {
+  return event.target || event.srcElement;
+}
+
+function preventDefault(event) {
+  if (event.preventDefault) {
+    event.preventDefault();
+  } else {
+    event.returnValue = false;
+  }
+}
+
+function stopPropagation(event) {
+  if (event.stopPropagation) {
+    event.stopPropagation();
+  } else {
+    event.cancelBubble = true;
+  }
+}
+
+var Event = exports.Event = {
+  addHandler: addHandler,
+  removeHandler: removeHandler,
+  getEvent: getEvent,
+  getTarget: getTarget,
+  preventDefault: preventDefault,
+  stopPropagation: stopPropagation
+};

src/TableHeader.js

@@ -217,6 +217,9 @@ class TableHeader extends Component {
   };
 
   onLineMouseUp = (event) => {
+    let {rows} = this.props;
+    let data = {rows:rows[0],cols:this.table.cols,currIndex:this.drag.currIndex};
+    this.props.afterDragColWidth && this.props.afterDragColWidth(data);
     this.clearDragBorder(event);
   };
   bodyonLineMouseMove = (event) => {
@@ -225,9 +228,7 @@ class TableHeader extends Component {
 
   clearDragBorder(){
     if (!this.props.dragborder) return;
-    let {rows} = this.props;
-    let data = {rows:rows[0],cols:this.table.cols,currIndex:this.drag.currIndex};
-    this.props.afterDragColWidth && this.props.afterDragColWidth(data);
+   
     this.drag = {
       option:""
     };