增加行拖拽开始时的回调函数

build/Table.js

@@ -113,7 +113,8 @@ var propTypes = {
   hoverContent: _propTypes2["default"].func,
   size: _propTypes2["default"].oneOf(['sm', 'md', 'lg']),
   rowDraggAble: _propTypes2["default"].bool,
-  onDropRow: _propTypes2["default"].func
+  onDropRow: _propTypes2["default"].func,
+  onDragRowStart: _propTypes2["default"].func
 };
 
 var defaultProps = {
@@ -159,7 +160,8 @@ var defaultProps = {
   heightConsistent: false,
   size: 'md',
   rowDraggAble: false,
-  onDropRow: function onDropRow() {}
+  onDropRow: function onDropRow() {},
+  onDragRowStart: function onDragRowStart() {}
 };
 
 var Table = function (_Component) {
@@ -189,6 +191,21 @@ var Table = function (_Component) {
       _this.contentTable.appendChild(div);
     };
 
+    _this.onDragRowStart = function (currentKey) {
+      var data = _this.state.data,
+          currentIndex = void 0,
+          record = void 0;
+      data.forEach(function (da, i) {
+        // tr 的唯一标识通过 data.key 或 rowKey 两种方式传进来
+        var trKey = da.key ? da.key : _this.getRowKey(da, i);
+        if (trKey == currentKey) {
+          currentIndex = i;
+          record = da;
+        }
+      });
+      _this.props.onDragRowStart && _this.props.onDragRowStart(record, currentIndex);
+    };
+
     _this.onDragRow = function (currentKey, targetKey) {
       var data = _this.state.data,
           currentIndex = void 0,
@@ -728,10 +745,17 @@ var Table = function (_Component) {
       store: this.store,
       dragborderKey: this.props.dragborderKey,
       rowDraggAble: this.props.rowDraggAble,
-      onDragRow: this.onDragRow
+      onDragRow: this.onDragRow,
+      onDragRowStart: this.onDragRowStart
     });
   };
 
+  /**
+   * 行拖拽开始时触发
+   * @param currentKey 当前拖拽目标的key
+   */
+
+
   /**
    * 行拖拽结束时触发
    * @param currentKey 当前拖拽目标的key
@@ -882,6 +906,7 @@ var Table = function (_Component) {
         bodyDisplayInRow: props.bodyDisplayInRow,
         rowDraggAble: this.props.rowDraggAble,
         onDragRow: this.onDragRow,
+        onDragRowStart: this.onDragRowStart,
         contentTable: this.contentTable,
         tableUid: this.tableUid,
         expandedIcon: props.expandedIcon,

build/TableRow.js

@@ -56,7 +56,8 @@ var propTypes = {
   expandRowByClick: _propTypes2["default"].bool,
   store: _propTypes2["default"].object.isRequired,
   rowDraggAble: _propTypes2["default"].bool,
-  onDragRow: _propTypes2["default"].func
+  onDragRow: _propTypes2["default"].func,
+  onDragRowStart: _propTypes2["default"].func
 };
 
 var defaultProps = {
@@ -107,6 +108,8 @@ var TableRow = function (_Component) {
     };
 
     _this.onDragStart = function (e) {
+      var onDragRowStart = _this.props.onDragRowStart;
+
       if (!_this.props.rowDraggAble) return;
       var event = _utils.Event.getEvent(e),
           target = _utils.Event.getTarget(event);
@@ -119,6 +122,8 @@ var TableRow = function (_Component) {
       // event.dataTransfer.setDragImage(crt, 0, 0);
       event.dataTransfer.effectAllowed = "move";
       event.dataTransfer.setData("Text", _this.currentIndex);
+
+      onDragRowStart && onDragRowStart(_this.currentIndex);
     };
 
     _this.onDragOver = function (e) {
@@ -155,10 +160,14 @@ var TableRow = function (_Component) {
     };
 
     _this.onTouchStart = function (e) {
+      var onDragRowStart = _this.props.onDragRowStart;
+
       var event = _utils.Event.getEvent(e),
           _target = _utils.Event.getTarget(event),
           target = _target.parentNode;
       _this.currentIndex = target.getAttribute("data-row-key");
+
+      onDragRowStart && onDragRowStart(_this.currentIndex);
     };
 
     _this.onTouchMove = function (e) {

demo/demolist/Demo1201.js

@@ -42,6 +42,16 @@ class Demo1201 extends Component {
     console.log('内容：' , this.currentRecord);
   }
 
+  /**
+   * 行拖拽开始时触发
+   * @param record 拖拽行的数据
+   * @param index 拖拽行的下标序号
+   */
+  onDragRowStart = (record,index) => {
+    console.log('拖拽的行数据：', record);
+    console.log('拖拽的行序号：', index);
+  }
+
   /**
    * 行拖拽结束时触发
    * @param data 拖拽改变顺序后的新data数组
@@ -58,6 +68,7 @@ class Demo1201 extends Component {
           columns={columns}
           data={data}
           rowDraggAble={true}
+          onDragRowStart={this.onDragRowStart}
           onDropRow={this.onDropRow}
         />
     );

docs/api.md

@@ -95,7 +95,8 @@ import 'bee-table/build/Table.css';
 | onFilterChange | 触发过滤输入操作以及下拉条件的回调 | function(field,value,condition) | `field` : 字段名称 <br> `value` : 字段值 <br> `condition` : 判断条件 |
 | onFilterClear | 清除过滤条件的回调函数，回调参数为清空的字段 | function(field) | `field` : 字段名称 |
 | onRowHover | 行hover时的回调函数 | function(index,record) | `index` : 当前行的index<br> `record` : 当前行的数据 |
-| onDropRow | 拖拽改变行顺序后的回调函数 | function(data,record) | `data` : 拖拽后的新data数组<br> `record` : 拖拽行的数据 |
+| onDragRowStart | 行拖拽开始时的回调函数 | function(record,index) | `record` : 当前行的数据 <br> `index` : 当前行的index|
+| onDropRow | 行拖拽结束后的回调函数 | function(data,record) | `data` : 拖拽后的新data数组<br> `record` : 拖拽行的数据 |
 
 
 ### Column

src/Table.js

@@ -57,7 +57,8 @@ const propTypes = {
   hoverContent:PropTypes.func,
   size: PropTypes.oneOf(['sm', 'md', 'lg']),
   rowDraggAble: PropTypes.bool,
-  onDropRow: PropTypes.func
+  onDropRow: PropTypes.func,
+  onDragRowStart: PropTypes.func
 };
 
 const defaultProps = {
@@ -94,7 +95,8 @@ const defaultProps = {
   heightConsistent:false,
   size: 'md',
   rowDraggAble:false,
-  onDropRow: ()=>{}
+  onDropRow: ()=>{},
+  onDragRowStart: ()=>{}
 };
 
 class Table extends Component {
@@ -559,10 +561,28 @@ class Table extends Component {
         dragborderKey={this.props.dragborderKey} 
         rowDraggAble={this.props.rowDraggAble}
         onDragRow={this.onDragRow}
+        onDragRowStart={this.onDragRowStart}
       />
     );
   }
 
+  /**
+   * 行拖拽开始时触发
+   * @param currentKey 当前拖拽目标的key
+   */
+  onDragRowStart = (currentKey) => {
+    let {data} = this.state,currentIndex,record;
+    data.forEach((da,i)=>{ 
+      // tr 的唯一标识通过 data.key 或 rowKey 两种方式传进来
+      let trKey = da.key ? da.key : this.getRowKey(da, i);
+      if(trKey == currentKey){
+        currentIndex = i;
+        record = da;
+      }
+    });
+    this.props.onDragRowStart && this.props.onDragRowStart(record,currentIndex);
+  }
+
   /**
    * 行拖拽结束时触发
    * @param currentKey 当前拖拽目标的key
@@ -735,6 +755,7 @@ class Table extends Component {
           bodyDisplayInRow = {props.bodyDisplayInRow}
           rowDraggAble={this.props.rowDraggAble}
           onDragRow={this.onDragRow}
+          onDragRowStart={this.onDragRowStart}
           contentTable={this.contentTable}
           tableUid = {this.tableUid}
           expandedIcon={props.expandedIcon}

src/TableRow.js

@@ -32,6 +32,7 @@ const propTypes = {
     store: PropTypes.object.isRequired,
     rowDraggAble: PropTypes.bool,
     onDragRow: PropTypes.func,
+    onDragRowStart: PropTypes.func,
 };
 
 const defaultProps = {
@@ -135,6 +136,7 @@ class TableRow extends Component{
    * 开始调整交换列的事件
    */
   onDragStart = (e) => {
+    let {onDragRowStart} = this.props;
     if (!this.props.rowDraggAble) return;
     let event = Event.getEvent(e) ,
     target = Event.getTarget(event);
@@ -147,6 +149,8 @@ class TableRow extends Component{
     // event.dataTransfer.setDragImage(crt, 0, 0);
      event.dataTransfer.effectAllowed = "move";
      event.dataTransfer.setData("Text", this.currentIndex);
+
+     onDragRowStart && onDragRowStart(this.currentIndex);
   }
 
   onDragOver = (e) => {
@@ -190,10 +194,13 @@ class TableRow extends Component{
    * 开始调整交换行的事件
    */
   onTouchStart = (e) => {
+    let {onDragRowStart} = this.props;
     let event = Event.getEvent(e) ,
         _target = Event.getTarget(event),
         target = _target.parentNode;
     this.currentIndex = target.getAttribute("data-row-key");
+    
+    onDragRowStart && onDragRowStart(this.currentIndex);
   }
 
   onTouchMove = (e) => {