拖拽优化测试

src/TableHeader.js

@@ -28,58 +28,6 @@ class TableHeader extends Component {
     contentWidthDiff: 0
   };
 
-  /**
-   *
-   * 动态绑定th line 事件方法
-   * @param {*} events
-   * @param {*} type  type 为false 为增加事件
-   * @param {*} eventSource 为false 给 th 内部的div增加事件
-   * @memberof TableHeader
-   */
-  thEventListen(events,type,eventSource){
-    let {ths,cols} = this.table;
-    for (let index = 0; index < ths.length; index++) {
-      const element = ths[index];//.getAttribute('data-type');
-      if(!element.getAttribute('data-th-fixed')){
-        let colLine =  null;
-        if(element.children.length === 0){
-          colLine = element;
-        }else if(element.children.length > 0){
-          colLine = element.lastElementChild;
-        }else if(element.children.length === 1){
-          colLine = element.children[0];
-        }
-        // const colLine =  element.children.length > 1?element.lastElementChild:element.children[0];
-        for (let i = 0; i < events.length; i++) {
-          const _event = events[i];
-          let _dataSource = eventSource?element:colLine;
-          if(type === "remove"){
-            EventUtil.removeHandler(_dataSource,_event.key,_event.fun);
-          }else{
-            EventUtil.addHandler(_dataSource,_event.key,_event.fun);
-          }
-        }
-      }
-    }
-  }
-
- 
-  /**
-   * 当前对象上绑定全局事件，用于拖拽区域以外时的事件处理
-   * @param {*} events
-   * @param {*} type
-   * @memberof TableHeader
-   */
-  bodyEventListen(events,type){
-    for (let i = 0; i < events.length; i++) {
-      const _event = events[i];
-      if(type == "remove"){
-        EventUtil.removeHandler(document.body,_event.key,_event.fun);
-      }else{
-        EventUtil.addHandler(document.body,_event.key,_event.fun);
-      }
-    }
-  }
 
   componentDidUpdate(){
     this.initTable();
@@ -87,56 +35,6 @@ class TableHeader extends Component {
   }
 
 
-  componentWillUnmount(){
-    if(!this.table)return;
-    if (this.props.draggable){
-      this.removeDragAbleEvent();
-    }
-    if(this.props.dragborder){
-      this.removeDragBorderEvent();
-    }
-  }
-
-  // componentDidMount(){
-    // this.initTable();
-    // this.initEvent();
-  // } 
-  
-  /**
-   * 初始化拖拽列宽的事件处理
-   * @returns
-   * @memberof TableHeader
-   */
-  initEvent(){
-    let  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);//表示把事件添加到th元素上
-  }
-
-  /**
-   * 移除当前全局事件对象
-   * @memberof TableHeader
-   */
-  removeDragBorderEvent(){
-    let  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 中。(公用方法)
    * @returns
@@ -152,6 +50,7 @@ class TableHeader extends Component {
       table.table = tableDome;
       table.cols = tableDome.getElementsByTagName("col");
       table.ths = tableDome.getElementsByTagName("th");
+      table.tr = tableDome.getElementsByTagName("tr");
     }
 
     table.fixedLeftHeaderTable = contentTable.querySelector('.u-table-fixed-left .u-table-header') ;
@@ -177,43 +76,95 @@ class TableHeader extends Component {
       }
     }
   }
+
+
+  initEvent(){
+    let  events = [
+      {key:'mouseup', fun:this.onTrMouseUp},
+      {key:'mousemove', fun:this.onTrMouseMove},
+      {key:'mousedown', fun:this.onTrMouseDown}
+    ];
+    this.eventListen(events,'',this.table.tr[0]);//表示把事件添加到th元素上
+    this.eventListen([{key:'mouseup',fun:this.bodyonLineMouseUp}],'',document.body);//body mouseup
+  }
+
+
+  eventListen(events,type,eventSource){
+    let {tr} = this.table;
+    for (let i = 0; i < events.length; i++) {
+      const _event = events[i];
+      if(type === "remove"){
+        EventUtil.removeHandler(eventSource,_event.key,_event.fun);
+      }else{
+        EventUtil.addHandler(eventSource,_event.key,_event.fun);
+      }
+    }
+  }
+
   /**
-   *相关滚动条联动操作
    *
+   *根据 data-type 来获取当前拖拽的对象的Object，如果为null表示拖动的对象并非是online
    * @memberof TableHeader
    */
-  optTableMargin =(table,scrollbarWidth)=>{
+  getOnLineObject = (_element) =>{
-    if(table){
+    let type = _element.getAttribute('data-type'),elementObj = null;
-      table.style.marginBottom = scrollbarWidth + "px"
+    if(!type){
+      let element = _element.parentElement||parentNode;//兼容写法。
+      if(element.getAttribute('data-type')){
+        elementObj = element;
       }
+    }else{
+      elementObj = _element;
+    }
+    return elementObj;
   }
 
-  optTableScroll = (table,overflow ={})=>{
+    /**
-    if(table){
+   * 调整列宽的down事件
-      const innerTable = table.querySelector('.u-table-body-inner');
+   * @memberof TableHeader
-      if(innerTable){
+   */
-        overflow.x && (innerTable.style.overflowX = overflow.x);
+  onTrMouseDown = (e) => {
-        overflow.y && (innerTable.style.overflowY = overflow.y);
+    Event.stopPropagation(e); 
-      }
+    let event = Event.getEvent(e) ,
-     
+    targetEvent = Event.getTarget(event);
-    }
+    const { clsPrefix, contentTable } = this.props;
-  }
+    console.log(" ------------------onTrMouseDown------------------ ");
+    let currentElement = this.getOnLineObject(targetEvent);
+    if(!currentElement)return;
+    let type = currentElement.getAttribute('data-type');
+    console.log("type : ",type);
+    if(!this.props.dragborder && !this.props.draggable)return;
+    if(type == 'online' && this.props.dragborder){
 
+      let currentIndex = parseInt(currentElement.getAttribute("data-line-index"));
+      let defaultWidth = currentElement.getAttribute("data-th-width");
+      let 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.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){
 
+    }else{
+      console.log("onTrMouseDown dragborder or draggable is all false !");
+      return ;
+    }
+  };
 
 
   /**
    * 调整列宽的move事件
    * @memberof TableHeader
    */
-  onLineMouseMove = (e) => {
+  onTrMouseMove = (e) => {
     const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll} = this.props;
     Event.stopPropagation(e); 
     let event = Event.getEvent(e);  
-      if (!this.props.dragborder) return;
+    if(this.props.dragborder && this.drag.option == "border"){
-      if(this.drag.option != "border"){
+      console.log(" --onTrMouseMove--border- ",this.drag.option);
-        return false;
-      }
       //移动改变宽度
       let currentCols = this.table.cols[this.drag.currIndex];
       let diff = (event.x - this.drag.oldLeft); 
@@ -259,59 +210,96 @@ class TableHeader extends Component {
                 this.optTableScroll( this.table.fixedRightBodyTable,{x:'auto'});
           }
         }
-        
       } 
-  };
+    }else if(this.props.draggable && this.drag.option == "draggable"){
-
+      console.log(" --onTrMouseMove--draggable- ",this.drag.option);
-  /**
+    }else{
-   * 调整列宽的down事件
+      // console.log("onTrMouseMove dragborder or draggable is all false !");
-   * @memberof TableHeader
+      // return ;
-   */
+    }
-  onLineMouseDown = (e) => {
+  }
-    Event.stopPropagation(e); 
-    let event = Event.getEvent(e);
-    const { clsPrefix, contentTable } = this.props;
-    if (!this.props.dragborder) return;
-    let currentIndex = parseInt(Event.getTarget(event).getAttribute("data-line-index"));
-    let defaultWidth = Event.getTarget(event).getAttribute("data-th-width");
-    let 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.drag.tableWidth = parseInt(this.table.table.style.width ?this.table.table.style.width:this.table.table.scrollWidth);
-  };
 
     /**
    * 调整列宽的up事件
    * @memberof TableHeader
    */
-  onLineMouseUp = (event) => {
+  onTrMouseUp = (e) => {
+    let event = Event.getEvent(e);  
     let width = this.drag.newWidth;
-    this.clearDragBorder(event);
+    this.mouseClear();
     this.props.onDropBorder && this.props.onDropBorder(event,width);
   };
 
-  /**
-   * 调整列宽到区域以外的up事件
-   */
-  bodyonLineMouseMove = (event) => {
-    this.clearDragBorder(event);
-  };
 
-  clearDragBorder(){
+  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:""
     };
-    if (this.props.draggable){
+    let data = {rows:rows[0],cols:this.table.cols,currIndex:this.drag.currIndex};
-      this.removeDragAbleEvent();
+    this.props.afterDragColWidth && this.props.afterDragColWidth(data);
+  }
+
+
+    /**
+   * 当前对象上绑定全局事件，用于拖拽区域以外时的事件处理
+   * @param {*} events
+   * @param {*} type
+   * @memberof TableHeader
+   */
+  bodyonLineMouseUp = (events,type) =>{
+    if(!this.drag || !this.drag.option)return;
+    console.log("----bodyEventListen",this.drag);
+    this.mouseClear();
+  }
+
+
+  /**
+   *相关滚动条联动操作
+   *
+   * @memberof TableHeader
+   */
+  optTableMargin =(table,scrollbarWidth)=>{
+    if(table){
+      table.style.marginBottom = scrollbarWidth + "px"
     }
   }
+
+  optTableScroll = (table,overflow ={})=>{
+    if(table){
+      const innerTable = table.querySelector('.u-table-body-inner');
+      if(innerTable){
+        overflow.x && (innerTable.style.overflowX = overflow.x);
+        overflow.y && (innerTable.style.overflowY = overflow.y);
+      }
+     
+    }
+  }
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
  
   //---拖拽列宽代码逻辑----start-----
  
@@ -593,8 +581,9 @@ class TableHeader extends Component {
     let attr = dragborder ? { id: `u-table-drag-thead-${this.theadKey}` } : {};
     return (
       <thead className={`${clsPrefix}-thead`} {...attr} data-theader-fixed='scroll' ref={_thead=>this._thead = _thead} >
-        {rows.map((row, index) => (
+        {rows.map((row, index) => {
-          <tr key={index} style={rowStyle} className={(filterable && index == rows.length - 1)?'filterable':''}>
+          let _rowLeng = (row.length-1);
+          return(<tr key={index} style={rowStyle} className={(filterable && index == rows.length - 1)?'filterable':''}>
             {row.map((da, columIndex, arr) => {
               let thHover = da.drgHover
                 ? ` ${clsPrefix}-thead th-drag-hover`
@@ -642,17 +631,16 @@ class TableHeader extends Component {
                     thClassName += ` ${clsPrefix}-thead-th ${canDotDrag}`;
                   }
                   thClassName += ` ${fixedStyle}`;
-                 
+                if(!da.fixed && columIndex != _rowLeng){
-                if(!da.fixed){
              
                   return (<th {...da}  {...keyTemp} className={thClassName} data-th-fixed={da.fixed} 
-                        data-line-key={da.key} data-line-index={columIndex} data-th-width={da.width} >
+                        data-line-key={da.key} data-line-index={columIndex} data-th-width={da.width} data-row-leng="1111111111111" >
                               {da.children}
                               {
                                 dragborder ? <div ref={el => (this.gap = el)} data-line-key={da.key} 
                                 data-line-index={columIndex} data-th-width={da.width}
                                 data-type="online" className = {`${clsPrefix}-thead-th-drag-gap`}>
-                                <div id='th-online' className='online' data-line-key={da.key} data-line-index={columIndex} data-th-width={da.width} /></div>:""
+                                <div className='online' /></div>:""
                               }
                         </th>)
               }else{
@@ -665,7 +653,7 @@ class TableHeader extends Component {
               }
             })}
           </tr>
-        ))}
+        )})}
       </thead>
     );
   }