拖拽不同步问题,拖拽虚线错位问题

build/TableHeader.js

@@ -98,7 +98,7 @@ var TableHeader = function (_Component) {
         _this.drag.tableWidth = parseInt(_this.table.table.style.width ? _this.table.table.style.width : _this.table.table.scrollWidth);
         console.log("====================", _this.drag);
       } else if (type != 'online' && _this.props.draggable) {
-        if (!_this.props.draggable) return;
+        if (!_this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
         targetEvent.setAttribute('draggable', true); //添加交换列效果
         _this.drag.option = 'dragAble';
         _this.currentDome = event.target;
@@ -232,8 +232,8 @@ var TableHeader = function (_Component) {
       console.log(" -------crt-------", crt);
       crt.style.backgroundColor = "#ebecf0";
       crt.style.width = _this.table.cols[currentIndex].style.width; //拖动后再交换列的时候，阴影效果可同步
-      crt.style.height = "44px";
+      crt.style.height = "40px";
-      // crt.style['line-height'] = "44px";
+      // crt.style['line-height'] = "40px";
       // document.body.appendChild(crt);
       document.getElementById(_this._table_none_cont_id).appendChild(crt);
 
@@ -255,12 +255,8 @@ var TableHeader = function (_Component) {
       }
       var event = _utils.Event.getEvent(e),
           target = _utils.Event.getTarget(event);
-      _this.currentDome.setAttribute('draggable', false); //添加交换列效果
+      _this.currentDome.setAttribute('draggable', false); //添加交换列效果 
-      var data = _this.getCurrentEventData(target);
+      console.log("-onDrop--target---", target);
-      if (!data) return;
-      if (!_this.currentObj || _this.currentObj.key == data.key) return;
-      if (!_this.props.onDrop) return;
-      _this.props.onDrop(event, { dragSource: _this.currentObj, dragTarg: data });
     };
 
     _this.onDragEnter = function (e) {
@@ -271,7 +267,9 @@ var TableHeader = function (_Component) {
       if (!currentIndex || parseInt(currentIndex) === _this.drag.currIndex) return;
       if (target.nodeName.toUpperCase() === "TH") {
         console.log("-onDragEnter-----", target);
-        target.style.border = "2px dashed #000";
+        target.style.border = "2px dashed rgba(5,0,0,0.25)";
+        // target.style.backgroundColor = 'rgb(235, 236, 240)';
+        // target.style['box-sizing'] = 'border-box';
       }
     };
 
@@ -283,6 +281,12 @@ var TableHeader = function (_Component) {
       // this.body.removeChild(document.getElementById(this._table_none_cont_id));
       console.log(_this.drag.newWidth + "--------------onDragEnd--target--", target);
       console.log("--------------onDragEnd----", _this._dragCurrent);
+
+      var data = _this.getCurrentEventData(_this._dragCurrent);
+      if (!data) return;
+      if (!_this.currentObj || _this.currentObj.key == data.key) return;
+      if (!_this.props.onDrop) return;
+      _this.props.onDrop(event, { dragSource: _this.currentObj, dragTarg: data });
     };
 
     _this.onDragLeave = function (e) {
@@ -552,12 +556,12 @@ var TableHeader = function (_Component) {
     if (!this.drag || !this.drag.option) return;
     var rows = this.props.rows;
 
+    var data = { rows: rows[0], cols: this.table.cols, currIndex: this.drag.currIndex };
+    this.props.afterDragColWidth && this.props.afterDragColWidth(data);
     this.drag = {
       option: ""
     };
     this.clearThsDr();
-    var data = { rows: rows[0], cols: this.table.cols, currIndex: this.drag.currIndex };
-    this.props.afterDragColWidth && this.props.afterDragColWidth(data);
   };
 
   /**
@@ -663,7 +667,7 @@ var TableHeader = function (_Component) {
         var _rowLeng = row.length - 1;
         return _react2["default"].createElement(
           "tr",
-          { key: index, style: rowStyle, className: filterable && index == rows.length - 1 ? 'filterable' : '' },
+          { key: index, style: rowStyle, aaaa: true, className: filterable && index == rows.length - 1 ? 'filterable' : '' },
           row.map(function (da, columIndex, arr) {
             var thHover = da.drgHover ? " " + clsPrefix + "-thead th-drag-hover" : "";
             delete da.drgHover;

demo/TableDemo.scss

@@ -1,20 +1,20 @@
-// @import "../node_modules/tinper-bee-core/scss/index.scss";
+@import "../node_modules/tinper-bee-core/scss/index.scss";
-// @import "../node_modules/bee-panel/src/Panel.scss";
+@import "../node_modules/bee-panel/src/Panel.scss";
-// @import "../node_modules/bee-layout/src/Layout.scss";
+@import "../node_modules/bee-layout/src/Layout.scss";
-// @import "../node_modules/bee-button/src/Button.scss";
+@import "../node_modules/bee-button/src/Button.scss";
-// @import "../node_modules/bee-transition/src/Transition.scss";
+@import "../node_modules/bee-transition/src/Transition.scss";
-// @import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
+@import "../node_modules/bee-popconfirm/src/Popconfirm.scss";
-// @import "../node_modules/bee-form-control/src/FormControl.scss";
+@import "../node_modules/bee-form-control/src/FormControl.scss";
-// @import "../node_modules/bee-pagination/src/Pagination.scss";
+@import "../node_modules/bee-pagination/src/Pagination.scss";
-// @import "../node_modules/bee-checkbox/src/Checkbox.scss";
+@import "../node_modules/bee-checkbox/src/Checkbox.scss";
-// @import "../node_modules/bee-select/src/Select.scss";
+@import "../node_modules/bee-select/src/Select.scss";
 // @import "../node_modules/bee-form/src/Form.scss";
-// @import "../node_modules/bee-popover/src/Popover.scss";
+@import "../node_modules/bee-popover/src/Popover.scss";
-// @import "../node_modules/bee-tooltip/src/Tooltip.scss";
+@import "../node_modules/bee-tooltip/src/Tooltip.scss";
-// @import "../node_modules/bee-message/build/Message.css";
+@import "../node_modules/bee-message/build/Message.css";
-// @import "../node_modules/bee-dropdown/build/Dropdown.css";
+@import "../node_modules/bee-dropdown/build/Dropdown.css";
-// @import "../node_modules/bee-input-number/build/InputNumber.css";
+@import "../node_modules/bee-input-number/build/InputNumber.css";
-// @import "../node_modules/bee-modal/build/Modal.css";
+@import "../node_modules/bee-modal/build/Modal.css";
 @import "../src/Table.scss";
 
 

demo/demolist/Demo92.js

@@ -66,6 +66,7 @@ class Demo23 extends Component {
     dragborder={true} 
     draggable={true} 
     scroll={{y:200}}
+    bordered={true}
     onDropBorder ={(e,width)=>{
       // console.log(width+"--调整列宽后触发事件",e.target);
     }}

demo/index.js

@@ -8,7 +8,7 @@ import Button from '../src';
 
 
 
-var Demo92 = require("./demolist/Demo92");var DemoArray = [{"example":<Demo92 />,"title":" 拖拽改变列宽度","code":"/**\n*\n* @title 拖拽改变列宽度\n* @parent 列操作-拖拽 Drag\n* @description 注：不支持tree结构的表头、合并表头的table\n*/\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee'; \nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\n\nconst columns23 = [\n  {\n    title: \"名字\",\n    dataIndex: \"a\",\n    key: \"a\",\n    width: '200',\n    fixed:'left'\n  },\n  {\n    title: \"性别\",\n    dataIndex: \"b\",\n    key: \"b\",\n    width: '600'\n  },\n  {\n    title: \"年龄\",\n    dataIndex: \"c\",\n    key: \"c\",\n    width: '200',\n    sumCol: true,\n    sorter: (a, b) => a.c - b.c\n  }, \n  {\n    title: \"武功级别\",\n    dataIndex: \"d\",\n    key: \"d\",\n    width: 500,\n  }\n];\n\nconst data23 = [\n  { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n  { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n  { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"31\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"21\" },\n  { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"11\" },\n  { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"32\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"22\" },\n  { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"12\" },\n  { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nconst defaultProps23 = {\n  prefixCls: \"bee-table\"\n};\n\nclass Demo23 extends Component {\n  constructor(props) {\n    super(props); \n  }\n\n  render() {\n    return <DragColumnTable columns={columns23} data={data23} bordered\n    dragborder={true} \n    draggable={true} \n    scroll={{y:200}}\n    onDropBorder ={(e,width)=>{\n      // console.log(width+\"--调整列宽后触发事件\",e.target);\n    }}\n    />;\n  }\n}\nDemo23.defaultProps = defaultProps23;\n\n\n","desc":" 注：不支持tree结构的表头、合并表头的table"}]
+var Demo92 = require("./demolist/Demo92");var DemoArray = [{"example":<Demo92 />,"title":" 拖拽改变列宽度","code":"/**\n*\n* @title 拖拽改变列宽度\n* @parent 列操作-拖拽 Drag\n* @description 注：不支持tree结构的表头、合并表头的table\n*/\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee'; \nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\n\nconst columns23 = [\n  {\n    title: \"名字\",\n    dataIndex: \"a\",\n    key: \"a\",\n    width: '200',\n    fixed:'left'\n  },\n  {\n    title: \"性别\",\n    dataIndex: \"b\",\n    key: \"b\",\n    width: '600'\n  },\n  {\n    title: \"年龄\",\n    dataIndex: \"c\",\n    key: \"c\",\n    width: '200',\n    sumCol: true,\n    sorter: (a, b) => a.c - b.c\n  }, \n  {\n    title: \"武功级别\",\n    dataIndex: \"d\",\n    key: \"d\",\n    width: 500,\n  }\n];\n\nconst data23 = [\n  { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n  { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n  { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"31\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"21\" },\n  { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"11\" },\n  { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"32\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"22\" },\n  { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"12\" },\n  { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nconst defaultProps23 = {\n  prefixCls: \"bee-table\"\n};\n\nclass Demo23 extends Component {\n  constructor(props) {\n    super(props); \n  }\n\n  render() {\n    return <DragColumnTable columns={columns23} data={data23} bordered\n    dragborder={true} \n    draggable={true} \n    scroll={{y:200}}\n    bordered={true}\n    onDropBorder ={(e,width)=>{\n      // console.log(width+\"--调整列宽后触发事件\",e.target);\n    }}\n    />;\n  }\n}\nDemo23.defaultProps = defaultProps23;\n\n\n","desc":" 注：不支持tree结构的表头、合并表头的table"}]
 
 
 class Demo extends Component {

dist/demo.js

@@ -8985,7 +8985,7 @@
 	
 	function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : _defaults(subClass, superClass); }
 	
-	var Demo92 = __webpack_require__(936);var DemoArray = [{ "example": _react2['default'].createElement(Demo92, null), "title": " 拖拽改变列宽度", "code": "/**\n*\n* @title 拖拽改变列宽度\n* @parent 列操作-拖拽 Drag\n* @description 注：不支持tree结构的表头、合并表头的table\n*/\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee'; \nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\n\nconst columns23 = [\n  {\n    title: \"名字\",\n    dataIndex: \"a\",\n    key: \"a\",\n    width: '200',\n    fixed:'left'\n  },\n  {\n    title: \"性别\",\n    dataIndex: \"b\",\n    key: \"b\",\n    width: '600'\n  },\n  {\n    title: \"年龄\",\n    dataIndex: \"c\",\n    key: \"c\",\n    width: '200',\n    sumCol: true,\n    sorter: (a, b) => a.c - b.c\n  }, \n  {\n    title: \"武功级别\",\n    dataIndex: \"d\",\n    key: \"d\",\n    width: 500,\n  }\n];\n\nconst data23 = [\n  { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n  { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n  { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"31\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"21\" },\n  { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"11\" },\n  { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"32\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"22\" },\n  { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"12\" },\n  { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nconst defaultProps23 = {\n  prefixCls: \"bee-table\"\n};\n\nclass Demo23 extends Component {\n  constructor(props) {\n    super(props); \n  }\n\n  render() {\n    return <DragColumnTable columns={columns23} data={data23} bordered\n    dragborder={true} \n    draggable={true} \n    scroll={{y:200}}\n    onDropBorder ={(e,width)=>{\n      // console.log(width+\"--调整列宽后触发事件\",e.target);\n    }}\n    />;\n  }\n}\nDemo23.defaultProps = defaultProps23;\n\n\n", "desc": " 注：不支持tree结构的表头、合并表头的table" }];
+	var Demo92 = __webpack_require__(936);var DemoArray = [{ "example": _react2['default'].createElement(Demo92, null), "title": " 拖拽改变列宽度", "code": "/**\n*\n* @title 拖拽改变列宽度\n* @parent 列操作-拖拽 Drag\n* @description 注：不支持tree结构的表头、合并表头的table\n*/\nimport React, { Component } from 'react';\nimport {Icon} from \"tinper-bee\";\n\nimport { Table } from 'tinper-bee'; \nimport dragColumn from \"tinper-bee/lib/dragColumn\";;\n\nconst columns23 = [\n  {\n    title: \"名字\",\n    dataIndex: \"a\",\n    key: \"a\",\n    width: '200',\n    fixed:'left'\n  },\n  {\n    title: \"性别\",\n    dataIndex: \"b\",\n    key: \"b\",\n    width: '600'\n  },\n  {\n    title: \"年龄\",\n    dataIndex: \"c\",\n    key: \"c\",\n    width: '200',\n    sumCol: true,\n    sorter: (a, b) => a.c - b.c\n  }, \n  {\n    title: \"武功级别\",\n    dataIndex: \"d\",\n    key: \"d\",\n    width: 500,\n  }\n];\n\nconst data23 = [\n  { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"2\" },\n  { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"1\" },\n  { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"31\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"21\" },\n  { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"11\" },\n  { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"32\" } , { a: \"杨过\", b: \"男\", c: 30,d:'内行', key: \"22\" },\n  { a: \"令狐冲\", b: \"男\", c: 41,d:'大侠', key: \"12\" },\n  { a: \"郭靖\", b: \"男\", c: 25,d:'大侠', key: \"3\" }\n];\n\nconst DragColumnTable = dragColumn(Table);\n\nconst defaultProps23 = {\n  prefixCls: \"bee-table\"\n};\n\nclass Demo23 extends Component {\n  constructor(props) {\n    super(props); \n  }\n\n  render() {\n    return <DragColumnTable columns={columns23} data={data23} bordered\n    dragborder={true} \n    draggable={true} \n    scroll={{y:200}}\n    bordered={true}\n    onDropBorder ={(e,width)=>{\n      // console.log(width+\"--调整列宽后触发事件\",e.target);\n    }}\n    />;\n  }\n}\nDemo23.defaultProps = defaultProps23;\n\n\n", "desc": " 注：不支持tree结构的表头、合并表头的table" }];
 	
 	var Demo = function (_Component) {
 	    _inherits(Demo, _Component);
@@ -44170,7 +44170,7 @@
 	        _this.drag.tableWidth = parseInt(_this.table.table.style.width ? _this.table.table.style.width : _this.table.table.scrollWidth);
 	        console.log("====================", _this.drag);
 	      } else if (type != 'online' && _this.props.draggable) {
-	        if (!_this.props.draggable) return;
+	        if (!_this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
 	        targetEvent.setAttribute('draggable', true); //添加交换列效果
 	        _this.drag.option = 'dragAble';
 	        _this.currentDome = event.target;
@@ -44304,8 +44304,8 @@
 	      console.log(" -------crt-------", crt);
 	      crt.style.backgroundColor = "#ebecf0";
 	      crt.style.width = _this.table.cols[currentIndex].style.width; //拖动后再交换列的时候，阴影效果可同步
-	      crt.style.height = "44px";
+	      crt.style.height = "40px";
-	      // crt.style['line-height'] = "44px";
+	      // crt.style['line-height'] = "40px";
 	      // document.body.appendChild(crt);
 	      document.getElementById(_this._table_none_cont_id).appendChild(crt);
 	
@@ -44327,12 +44327,8 @@
 	      }
 	      var event = _utils.Event.getEvent(e),
 	          target = _utils.Event.getTarget(event);
-	      _this.currentDome.setAttribute('draggable', false); //添加交换列效果
+	      _this.currentDome.setAttribute('draggable', false); //添加交换列效果 
-	      var data = _this.getCurrentEventData(target);
+	      console.log("-onDrop--target---", target);
-	      if (!data) return;
-	      if (!_this.currentObj || _this.currentObj.key == data.key) return;
-	      if (!_this.props.onDrop) return;
-	      _this.props.onDrop(event, { dragSource: _this.currentObj, dragTarg: data });
 	    };
 	
 	    _this.onDragEnter = function (e) {
@@ -44343,7 +44339,9 @@
 	      if (!currentIndex || parseInt(currentIndex) === _this.drag.currIndex) return;
 	      if (target.nodeName.toUpperCase() === "TH") {
 	        console.log("-onDragEnter-----", target);
-	        target.style.border = "2px dashed #000";
+	        target.style.border = "2px dashed rgba(5,0,0,0.25)";
+	        // target.style.backgroundColor = 'rgb(235, 236, 240)';
+	        // target.style['box-sizing'] = 'border-box';
 	      }
 	    };
 	
@@ -44355,6 +44353,12 @@
 	      // this.body.removeChild(document.getElementById(this._table_none_cont_id));
 	      console.log(_this.drag.newWidth + "--------------onDragEnd--target--", target);
 	      console.log("--------------onDragEnd----", _this._dragCurrent);
+	
+	      var data = _this.getCurrentEventData(_this._dragCurrent);
+	      if (!data) return;
+	      if (!_this.currentObj || _this.currentObj.key == data.key) return;
+	      if (!_this.props.onDrop) return;
+	      _this.props.onDrop(event, { dragSource: _this.currentObj, dragTarg: data });
 	    };
 	
 	    _this.onDragLeave = function (e) {
@@ -44624,12 +44628,12 @@
 	    if (!this.drag || !this.drag.option) return;
 	    var rows = this.props.rows;
 	
+	    var data = { rows: rows[0], cols: this.table.cols, currIndex: this.drag.currIndex };
+	    this.props.afterDragColWidth && this.props.afterDragColWidth(data);
 	    this.drag = {
 	      option: ""
 	    };
 	    this.clearThsDr();
-	    var data = { rows: rows[0], cols: this.table.cols, currIndex: this.drag.currIndex };
-	    this.props.afterDragColWidth && this.props.afterDragColWidth(data);
 	  };
 	
 	  /**
@@ -44735,7 +44739,7 @@
 	        var _rowLeng = row.length - 1;
 	        return _react2["default"].createElement(
 	          "tr",
-	          { key: index, style: rowStyle, className: filterable && index == rows.length - 1 ? 'filterable' : '' },
+	          { key: index, style: rowStyle, aaaa: true, className: filterable && index == rows.length - 1 ? 'filterable' : '' },
 	          row.map(function (da, columIndex, arr) {
 	            var thHover = da.drgHover ? " " + clsPrefix + "-thead th-drag-hover" : "";
 	            delete da.drgHover;
@@ -88291,6 +88295,8 @@
 	
 	function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
 	
+	function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+	
 	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 	
 	function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
@@ -88348,14 +88354,15 @@
 	  }
 	
 	  Demo23.prototype.render = function render() {
-	    return _react2['default'].createElement(DragColumnTable, { columns: columns23, data: data23, bordered: true,
+	    var _React$createElement;
+	
+	    return _react2['default'].createElement(DragColumnTable, (_React$createElement = { columns: columns23, data: data23, bordered: true,
 	      dragborder: true,
 	      draggable: true,
-	      scroll: { y: 200 },
+	      scroll: { y: 200 }
-	      onDropBorder: function onDropBorder(e, width) {
+	    }, _defineProperty(_React$createElement, 'bordered', true), _defineProperty(_React$createElement, 'onDropBorder', function onDropBorder(e, width) {
-	        // console.log(width+"--调整列宽后触发事件",e.target);
+	      // console.log(width+"--调整列宽后触发事件",e.target);
-	      }
+	    }), _React$createElement));
-	    });
 	  };
 	
 	  return Demo23;

index.html

@@ -5,7 +5,7 @@
     <title>neoui-react-button</title>
     <link rel="stylesheet" href="./demo/atom-one-dark.css">
     <link rel="stylesheet" href="./dist/demo.css">
-    <link href="//design.yonyoucloud.com/static/tinper-bee/latest/assets/tinper-bee.css" rel="stylesheet" media="screen" />
+    <!-- <link href="//design.yonyoucloud.com/static/tinper-bee/latest/assets/tinper-bee.css" rel="stylesheet" media="screen" /> -->
    
 
 </head>

src/Table.scss

@@ -77,7 +77,7 @@ $icon-color:#505F79;
       border-bottom: 1px solid $table-th-bottom-border;
     }
     tr>th:last-child{
-      border-right: none;
+      border-right: none; 
     }
   }
   tr {

src/TableHeader.js

@@ -173,7 +173,7 @@ class TableHeader extends Component {
       this.drag.tableWidth = parseInt(this.table.table.style.width ?this.table.table.style.width:this.table.table.scrollWidth);
       console.log("====================",this.drag);
     }else if(type != 'online' &&  this.props.draggable){
-        if (!this.props.draggable) return; 
+        if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return; 
         targetEvent.setAttribute('draggable',true);//添加交换列效果
         this.drag.option = 'dragAble';
         this.currentDome = event.target;
@@ -267,12 +267,12 @@ class TableHeader extends Component {
   mouseClear(){ 
     if(!this.drag || !this.drag.option)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:""
     };
     this.clearThsDr();
-    let data = {rows:rows[0],cols:this.table.cols,currIndex:this.drag.currIndex};
-    this.props.afterDragColWidth && this.props.afterDragColWidth(data);
   }
 
   clearThsDr =()=>{
@@ -351,8 +351,8 @@ class TableHeader extends Component {
     console.log(" -------crt-------",crt);
     crt.style.backgroundColor = "#ebecf0";
     crt.style.width = this.table.cols[currentIndex].style.width;//拖动后再交换列的时候，阴影效果可同步
-    crt.style.height = "44px";
+    crt.style.height = "40px";
-    // crt.style['line-height'] = "44px";
+    // crt.style['line-height'] = "40px";
     // document.body.appendChild(crt);
     document.getElementById(this._table_none_cont_id).appendChild(crt);
     
@@ -376,12 +376,8 @@ class TableHeader extends Component {
     if(this.drag && this.drag.option != 'dragAble'){return;}
     let event = Event.getEvent(e) ,
     target = Event.getTarget(event);
-    this.currentDome.setAttribute('draggable',false);//添加交换列效果
+    this.currentDome.setAttribute('draggable',false);//添加交换列效果 
-    let data = this.getCurrentEventData(target);
+    console.log("-onDrop--target---",target);
-    if(!data)return;
-    if (!this.currentObj || this.currentObj.key == data.key) return;
-    if(!this.props.onDrop)return;
-    this.props.onDrop(event,{dragSource:this.currentObj,dragTarg:data});
   };
 
 
@@ -393,7 +389,9 @@ class TableHeader extends Component {
     if(!currentIndex || parseInt(currentIndex) === this.drag.currIndex)return;
     if(target.nodeName.toUpperCase() === "TH"){
       console.log("-onDragEnter-----",target);
-      target.style.border = "2px dashed #000";
+      target.style.border = "2px dashed rgba(5,0,0,0.25)";
+      // target.style.backgroundColor = 'rgb(235, 236, 240)';
+      // target.style['box-sizing'] = 'border-box';
     }
   }
 
@@ -405,6 +403,12 @@ class TableHeader extends Component {
     // this.body.removeChild(document.getElementById(this._table_none_cont_id));
     console.log(this.drag.newWidth+"--------------onDragEnd--target--",target);
     console.log("--------------onDragEnd----",this._dragCurrent);
+
+    let data = this.getCurrentEventData(this._dragCurrent);
+    if(!data)return;
+    if (!this.currentObj || this.currentObj.key == data.key) return;
+    if(!this.props.onDrop)return;
+    this.props.onDrop(event,{dragSource:this.currentObj,dragTarg:data});
   }
 
 
@@ -590,7 +594,7 @@ class TableHeader extends Component {
       <thead className={`${clsPrefix}-thead`} {...attr} data-theader-fixed='scroll' ref={_thead=>this._thead = _thead} >
         {rows.map((row, index) => {
           let _rowLeng = (row.length-1);
-          return(<tr key={index} style={rowStyle} className={(filterable && index == rows.length - 1)?'filterable':''}>
+          return(<tr key={index} style={rowStyle} aaaa className={(filterable && index == rows.length - 1)?'filterable':''}>
             {row.map((da, columIndex, arr) => {
               let thHover = da.drgHover
                 ? ` ${clsPrefix}-thead th-drag-hover`