[Feature]行拖拽支持触摸屏

build/ColumnManager.js

@@ -18,6 +18,10 @@ var _ColumnGroup = require('./ColumnGroup');
 
 var _ColumnGroup2 = _interopRequireDefault(_ColumnGroup);
 
+var _beeIcon = require('bee-icon');
+
+var _beeIcon2 = _interopRequireDefault(_beeIcon);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
@@ -25,13 +29,27 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 //行控制管理
-
 var ColumnManager = function () {
-  function ColumnManager(columns, elements, originWidth) {
+  function ColumnManager(columns, elements, originWidth, rowDraggAble) {
     _classCallCheck(this, ColumnManager);
 
     this._cached = {};
 
+    //判断是否使用行拖拽
+    if (rowDraggAble) {
+      var dragHandleColumn = [{
+        className: "drag-handle-column",
+        title: "",
+        key: "dragHandle",
+        dataIndex: "dragHandle",
+        fixed: "left",
+        width: 49,
+        render: function render() {
+          return _react2["default"].createElement(_beeIcon2["default"], { type: 'uf-navmenu' });
+        }
+      }];
+      columns = dragHandleColumn.concat(columns);
+    }
     this.columns = columns || this.normalize(elements);
     this.originWidth = originWidth;
   }

build/Table.css

@@ -224,6 +224,10 @@
   .u-table td {
     padding: 12px 8px;
     word-break: break-all; }
+    .u-table th.drag-handle-column .uf,
+    .u-table td.drag-handle-column .uf {
+      font-size: 12px;
+      line-height: 12px; }
     .u-table th.text-center,
     .u-table td.text-center {
       text-align: center; }

build/Table.js

@@ -266,7 +266,7 @@ var Table = function (_Component) {
 
     var expandedRowKeys = [];
     var rows = [].concat(_toConsumableArray(props.data));
-    _this.columnManager = new _ColumnManager2["default"](props.columns, props.children, props.originWidth);
+    _this.columnManager = new _ColumnManager2["default"](props.columns, props.children, props.originWidth, props.rowDraggAble);
     _this.store = (0, _createStore2["default"])({ currentHoverKey: null });
     _this.firstDid = true;
     if (props.defaultExpandAllRows) {

build/TableRow.js

@@ -83,16 +83,26 @@ var TableRow = function (_Component) {
     var _this = _possibleConstructorReturn(this, _Component.call(this, props));
 
     _this.initEvent = function () {
-      var events = [{ key: 'dragstart', fun: _this.onDragStart }, //用户开始拖动元素时触发
+      var events = [{ key: 'touchstart', fun: _this.onTouchStart }, //手指触摸到一个 DOM 元素时触发
+      { key: 'touchmove', fun: _this.onTouchMove }, //手指在一个 DOM 元素上滑动时触发
+      { key: 'touchend', fun: _this.onTouchEnd }, //手指从一个 DOM 元素上移开时触发
+
+      { key: 'dragstart', fun: _this.onDragStart }, //用户开始拖动元素时触发
       { key: 'dragover', fun: _this.onDragOver }, //当某被拖动的对象在另一对象容器范围内拖动时触发此事件
       { key: 'drop', fun: _this.onDrop }, //在一个拖动过程中，释放鼠标键时触发此事件 
-
       { key: 'dragenter', fun: _this.onDragEnter }, { key: 'dragleave', fun: _this.onDragLeave }];
       _this.eventListen(events, '', _this.element);
     };
 
     _this.removeDragAbleEvent = function () {
-      var events = [{ key: 'dragstart', fun: _this.onDragStart }, { key: 'dragover', fun: _this.onDragOver }, { key: 'drop', fun: _this.onDrop }, { key: 'dragenter', fun: _this.onDragEnter }, { key: 'dragleave', fun: _this.onDragLeave }];
+      var events = [{ key: 'touchstart', fun: _this.onTouchStart }, //手指触摸到一个 DOM 元素时触发
+      { key: 'touchmove', fun: _this.onTouchMove }, //手指在一个 DOM 元素上滑动时触发
+      { key: 'touchend', fun: _this.onTouchEnd }, //手指从一个 DOM 元素上移开时触发
+
+      { key: 'dragstart', fun: _this.onDragStart }, //用户开始拖动元素时触发
+      { key: 'dragover', fun: _this.onDragOver }, //当某被拖动的对象在另一对象容器范围内拖动时触发此事件
+      { key: 'drop', fun: _this.onDrop }, //在一个拖动过程中，释放鼠标键时触发此事件 
+      { key: 'dragenter', fun: _this.onDragEnter }, { key: 'dragleave', fun: _this.onDragLeave }];
       _this.eventListen(events, 'remove', _this.element);
     };
 
@@ -138,26 +148,81 @@ var TableRow = function (_Component) {
       onDragRow && onDragRow(currentKey, targetKey);
     };
 
+    _this.getTouchDom = function (event) {
+      var currentLocation = event.changedTouches[0];
+      var realTarget = document.elementFromPoint(currentLocation.clientX, currentLocation.clientY);
+      return realTarget;
+    };
+
+    _this.onTouchStart = function (e) {
+      var event = _utils.Event.getEvent(e),
+          _target = _utils.Event.getTarget(event),
+          target = _target.parentNode;
+      _this.currentIndex = target.getAttribute("data-row-key");
+    };
+
+    _this.onTouchMove = function (e) {
+      var event = _utils.Event.getEvent(e);
+      event.preventDefault();
+      var touchTarget = _this.getTouchDom(event),
+          target = touchTarget.parentNode,
+          targetKey = target.getAttribute("data-row-key");
+      if (!targetKey || targetKey === _this.currentIndex) return;
+      if (target.nodeName.toUpperCase() === "TR") {
+        if (_this.cacheCurrentIndex !== targetKey) {
+          //模拟 touchenter toucheleave 事件
+          _this.cacheCurrentIndex && _this.synchronizeTableTr(_this.cacheCurrentIndex, null); //去掉虚线
+          _this.synchronizeTableTr(targetKey, true); //添加虚线
+        }
+      }
+    };
+
+    _this.onTouchEnd = function (e) {
+      var onDragRow = _this.props.onDragRow;
+
+      var event = _utils.Event.getEvent(e),
+          currentKey = _this.currentIndex,
+          //拖拽行的key
+      touchTarget = _this.getTouchDom(event),
+          //当前触摸的DOM节点
+      target = touchTarget.parentNode,
+          //目标位置的行
+      targetKey = target.getAttribute("data-row-key"); //目标位置的行key
+      if (!targetKey || targetKey === currentKey) return;
+      if (target.nodeName.toUpperCase() === "TR") {
+        _this.synchronizeTableTr(currentKey, null);
+        _this.synchronizeTableTr(targetKey, null);
+      }
+
+      onDragRow && onDragRow(currentKey, targetKey);
+    };
+
     _this.synchronizeTableTrShadow = function () {
       var _this$props2 = _this.props,
           contentTable = _this$props2.contentTable,
           index = _this$props2.index;
 
 
-      var _table_cont = contentTable.querySelector('.u-table-scroll table tbody').getElementsByTagName("tr")[index],
+      var cont = contentTable.querySelector('.u-table-scroll table tbody').getElementsByTagName("tr")[index],
-          _table_trs = _table_cont.getBoundingClientRect(),
+          trs = cont.getBoundingClientRect(),
-          _table_fixed_left_trs = contentTable.querySelector('.u-table-fixed-left table tbody').getElementsByTagName("tr")[index].getBoundingClientRect(),
+          fixed_left_trs = contentTable.querySelector('.u-table-fixed-left table tbody'),
-          _table_fixed_right_trs = contentTable.querySelector('.u-table-fixed-right table tbody').getElementsByTagName("tr")[index].getBoundingClientRect();
+          fixed_right_trs = contentTable.querySelector('.u-table-fixed-right table tbody');
+      fixed_left_trs = fixed_left_trs && fixed_left_trs.getElementsByTagName("tr")[index].getBoundingClientRect();
+      fixed_right_trs = fixed_right_trs && fixed_right_trs.getElementsByTagName("tr")[index].getBoundingClientRect();
 
       var div = document.createElement("div");
-      var style = "wdith:" + (_table_trs.width + _table_fixed_left_trs.width + _table_fixed_right_trs.width) + "px";
+      var style = "wdith:" + (trs.width + (fixed_left_trs ? fixed_left_trs.width : 0) + (fixed_right_trs ? fixed_right_trs.width : 0)) + "px";
-      style += "height:" + _table_trs.height + "px";
+      style += ";height:" + trs.height + "px";
-      style += "classname:" + _table_cont.className;
+      style += ";classname:" + cont.className;
       div.setAttribute("style", style);
       return div;
     };
 
     _this.synchronizeTableTr = function (currentIndex, type) {
+      if (type) {
+        //同步 this.cacheCurrentIndex
+        _this.cacheCurrentIndex = currentIndex;
+      }
       var contentTable = _this.props.contentTable;
 
       var _table_trs = contentTable.querySelector('.u-table-scroll table tbody'),
@@ -242,6 +307,7 @@ var TableRow = function (_Component) {
     _this.onMouseLeave = _this.onMouseLeave.bind(_this);
     _this.expandHeight = 0;
     _this.event = false;
+    _this.cacheCurrentIndex = null;
     return _this;
   }
 
@@ -303,6 +369,21 @@ var TableRow = function (_Component) {
    */
 
 
+  /**
+   * 获取当前触摸的Dom节点
+   */
+
+
+  /**
+   * 开始调整交换行的事件
+   */
+
+
+  /**
+   * 手指移开时触发
+   */
+
+
   /**
    *同步当前拖拽到阴影
    * @memberof TableRow

demo/demolist/Demo1201.js

@@ -7,7 +7,6 @@
 */
 
 import React, { Component } from "react";
-import {Button,Tooltip} from "tinper-bee";
 import Table from "../../src";
 
 const columns = [

dist/demo.css

@@ -142,6 +142,12 @@
   .u-loading.u-loading-line.u-loading-line-warning > div {
     background-color: #ff9800; }
 
+.u-loading.u-loading-custom > div {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%); }
+
 @keyframes line-scale {
   0% {
     transform: scaley(1); }
@@ -203,6 +209,10 @@
   .u-table td {
     padding: 12px 8px;
     word-break: break-all; }
+    .u-table th.drag-handle-column .uf,
+    .u-table td.drag-handle-column .uf {
+      font-size: 12px;
+      line-height: 12px; }
     .u-table th.text-center,
     .u-table td.text-center {
       text-align: center; }

src/ColumnManager.js

@@ -1,13 +1,28 @@
 import React from 'react';
 import Column from './Column';
 import ColumnGroup from './ColumnGroup';
+import Icon from 'bee-icon';
 
 //行控制管理
-
 export default class ColumnManager {
   _cached = {}
 
-  constructor(columns, elements,originWidth) {
+  constructor(columns, elements,originWidth,rowDraggAble) {
+    //判断是否使用行拖拽
+    if(rowDraggAble) {
+      let dragHandleColumn =[{
+        className: "drag-handle-column",
+        title: "",
+        key: "dragHandle",
+        dataIndex: "dragHandle",
+        fixed:"left",
+        width: 49, 
+        render: () => {
+          return <Icon type="uf-navmenu" />
+        }
+      }]
+      columns = dragHandleColumn.concat(columns);
+    }
     this.columns = columns || this.normalize(elements);
     this.originWidth = originWidth;
   }

src/Table.js

@@ -102,7 +102,7 @@ class Table extends Component {
     super(props);
     let expandedRowKeys = [];
     let rows = [...props.data];
-    this.columnManager = new ColumnManager(props.columns, props.children, props.originWidth);
+    this.columnManager = new ColumnManager(props.columns, props.children, props.originWidth, props.rowDraggAble);
     this.store = createStore({ currentHoverKey: null });
     this.firstDid = true;
     if (props.defaultExpandAllRows) {

src/Table.scss

@@ -111,6 +111,12 @@ $icon-color:#505F79;
   td {
     padding: $vertical-padding $horizontal-padding;
     word-break: break-all;
+    &.drag-handle-column {
+      .uf {
+        font-size: 12px;
+        line-height: 12px;
+      }
+    }
     &.text-center{
       text-align: center;
     }

src/TableRow.js

@@ -60,6 +60,7 @@ class TableRow extends Component{
      this.onMouseLeave = this.onMouseLeave.bind(this);
      this.expandHeight = 0;
      this.event = false;
+     this.cacheCurrentIndex = null;
  }
 
 
@@ -84,10 +85,13 @@ class TableRow extends Component{
    */
   initEvent=()=>{
     let  events = [
+      {key:'touchstart', fun:this.onTouchStart},//手指触摸到一个 DOM 元素时触发
+      {key:'touchmove', fun:this.onTouchMove}, //手指在一个 DOM 元素上滑动时触发
+      {key:'touchend', fun:this.onTouchEnd}, //手指从一个 DOM 元素上移开时触发
+
       {key:'dragstart',fun:this.onDragStart},//用户开始拖动元素时触发
       {key:'dragover', fun:this.onDragOver},//当某被拖动的对象在另一对象容器范围内拖动时触发此事件
       {key:'drop', fun:this.onDrop},        //在一个拖动过程中，释放鼠标键时触发此事件 
-
       {key:'dragenter', fun:this.onDragEnter},
       {key:'dragleave', fun:this.onDragLeave},
     ];
@@ -99,10 +103,13 @@ class TableRow extends Component{
    */
   removeDragAbleEvent=()=>{
     let  events = [
-      {key:'dragstart',fun:this.onDragStart},
+      {key:'touchstart', fun:this.onTouchStart},//手指触摸到一个 DOM 元素时触发
-      {key:'dragover', fun:this.onDragOver},
+      {key:'touchmove', fun:this.onTouchMove}, //手指在一个 DOM 元素上滑动时触发
-      {key:'drop', fun:this.onDrop},
+      {key:'touchend', fun:this.onTouchEnd}, //手指从一个 DOM 元素上移开时触发
 
+      {key:'dragstart',fun:this.onDragStart},//用户开始拖动元素时触发
+      {key:'dragover', fun:this.onDragOver},//当某被拖动的对象在另一对象容器范围内拖动时触发此事件
+      {key:'drop', fun:this.onDrop},        //在一个拖动过程中，释放鼠标键时触发此事件 
       {key:'dragenter', fun:this.onDragEnter},
       {key:'dragleave', fun:this.onDragLeave},
     ];
@@ -154,14 +161,15 @@ class TableRow extends Component{
   onDrop = (e) => {
     let {rowDraggAble,onDragRow} = this.props;
     let event = Event.getEvent(e) ,
-    _target = Event.getTarget(event),target = _target.parentNode;
+        _target = Event.getTarget(event),
+        target = _target.parentNode;
     
     let currentKey = event.dataTransfer.getData("text");
     let targetKey = target.getAttribute("data-row-key");
 
     if(!targetKey || targetKey === currentKey)return;    
     if(target.nodeName.toUpperCase() === "TR"){
-      this.synchronizeTableTr(currentKey,null);
+      this.synchronizeTableTr(currentKey,null); 
       this.synchronizeTableTr(targetKey,null);
       // target.setAttribute("style","");
       // this.synchronizeTrStyle(this.currentIndex,false);
@@ -169,6 +177,58 @@ class TableRow extends Component{
     onDragRow && onDragRow(currentKey,targetKey);
   };
 
+  /**
+   * 获取当前触摸的Dom节点
+   */
+  getTouchDom = (event) => {
+    let currentLocation = event.changedTouches[0];
+    let realTarget = document.elementFromPoint(currentLocation.clientX, currentLocation.clientY);
+    return realTarget;
+  }
+
+  /**
+   * 开始调整交换行的事件
+   */
+  onTouchStart = (e) => {
+    let event = Event.getEvent(e) ,
+        _target = Event.getTarget(event),
+        target = _target.parentNode;
+    this.currentIndex = target.getAttribute("data-row-key");
+  }
+
+  onTouchMove = (e) => {
+    let event = Event.getEvent(e);
+    event.preventDefault();
+    let touchTarget = this.getTouchDom(event),
+        target = touchTarget.parentNode,
+        targetKey = target.getAttribute("data-row-key");
+    if(!targetKey || targetKey === this.currentIndex)return;
+    if(target.nodeName.toUpperCase() === "TR"){
+      if(this.cacheCurrentIndex !== targetKey){ //模拟 touchenter toucheleave 事件
+        this.cacheCurrentIndex && this.synchronizeTableTr(this.cacheCurrentIndex,null); //去掉虚线
+        this.synchronizeTableTr(targetKey,true); //添加虚线
+      }
+    }
+  }
+
+  /**
+   * 手指移开时触发
+   */
+  onTouchEnd = (e) => {
+    let {onDragRow} = this.props;
+    let event = Event.getEvent(e),
+        currentKey = this.currentIndex, //拖拽行的key
+        touchTarget = this.getTouchDom(event), //当前触摸的DOM节点
+        target = touchTarget.parentNode, //目标位置的行
+        targetKey = target.getAttribute("data-row-key"); //目标位置的行key
+    if(!targetKey || targetKey === currentKey)return;    
+    if(target.nodeName.toUpperCase() === "TR"){
+      this.synchronizeTableTr(currentKey,null);
+      this.synchronizeTableTr(targetKey,null);
+    }
+    
+    onDragRow && onDragRow(currentKey,targetKey);
+  }
 
   /**
    *同步当前拖拽到阴影
@@ -177,15 +237,17 @@ class TableRow extends Component{
   synchronizeTableTrShadow = ()=>{
     let {contentTable,index} = this.props; 
 
-    let _table_cont = contentTable.querySelector('.u-table-scroll table tbody').getElementsByTagName("tr")[index],
+    let cont = contentTable.querySelector('.u-table-scroll table tbody').getElementsByTagName("tr")[index],
-    _table_trs = _table_cont.getBoundingClientRect(),
+        trs = cont.getBoundingClientRect(),
-     _table_fixed_left_trs = contentTable.querySelector('.u-table-fixed-left table tbody').getElementsByTagName("tr")[index].getBoundingClientRect(),
+        fixed_left_trs = contentTable.querySelector('.u-table-fixed-left table tbody'),
-    _table_fixed_right_trs = contentTable.querySelector('.u-table-fixed-right table tbody').getElementsByTagName("tr")[index].getBoundingClientRect();
+        fixed_right_trs = contentTable.querySelector('.u-table-fixed-right table tbody');
-
+    fixed_left_trs = fixed_left_trs && fixed_left_trs.getElementsByTagName("tr")[index].getBoundingClientRect();
+    fixed_right_trs = fixed_right_trs && fixed_right_trs.getElementsByTagName("tr")[index].getBoundingClientRect()
+    
     let div = document.createElement("div");
-    let style = "wdith:"+(_table_trs.width + _table_fixed_left_trs.width + _table_fixed_right_trs.width)+"px";
+    let style = "wdith:"+(trs.width + (fixed_left_trs ? fixed_left_trs.width : 0) + (fixed_right_trs ? fixed_right_trs.width : 0))+"px";
-    style += "height:"+ _table_trs.height+"px";
+    style += ";height:"+ trs.height+"px";
-    style += "classname:"+ _table_cont.className;
+    style += ";classname:"+ cont.className;
     div.setAttribute("style",style);
     return div;
   }
@@ -195,6 +257,9 @@ class TableRow extends Component{
    * 同步自己,也需要同步当前行的行显示
    */
   synchronizeTableTr = (currentIndex,type)=>{
+    if(type){ //同步 this.cacheCurrentIndex
+      this.cacheCurrentIndex = currentIndex; 
+    } 
     let {contentTable} = this.props; 
     let _table_trs = contentTable.querySelector('.u-table-scroll table tbody'),
      _table_fixed_left_trs = contentTable.querySelector('.u-table-fixed-left table tbody'),