diff --git a/src/Table.js b/src/Table.js index 425abbe..2a40c40 100644 --- a/src/Table.js +++ b/src/Table.js @@ -146,9 +146,11 @@ class Table extends Component { this.handleRowHover = this.handleRowHover.bind(this); this.computeTableWidth = this.computeTableWidth.bind(this); this.onBodyMouseLeave = this.onBodyMouseLeave.bind(this); + this.tableUid = null; } componentDidMount() { + this.getTableUID(); EventUtil.addHandler(this.contentTable,'keydown',this.onKeyDown); EventUtil.addHandler(this.contentTable,'focus',this.onFocus); setTimeout(this.resetScrollX, 300); @@ -244,6 +246,17 @@ class Table extends Component { renderFlag: !renderFlag }); } + + getTableUID =()=>{ + let uid = "_table_uid_"+new Date().getTime(); + this.tableUid = uid; + let div = document.createElement("div"); + // div.className = "u-table-drag-hidden-cont"; + div.className = "u-table-drag-hidden-cont"; + div.id = uid; + this.contentTable.appendChild(div); + } + computeTableWidth() { //如果用户传了scroll.x按用户传的为主 @@ -531,15 +544,23 @@ class Table extends Component { ); } - onDragRow = (currentIndex,targetIndex)=>{ - let {data} = this.state, - currentObj = data[currentIndex], - targetObj = data[targetIndex]; - console.log(currentIndex+" ----------onRowDragEnd-------- "+targetIndex); - data.splice(targetIndex, 0, data.splice(currentIndex, 1).shift()); - console.log(" _data---- ",data); + onDragRow = (currentKey,targetKey)=>{ + let {data} = this.state,currentIndex,targetIndex; + data.forEach((da,i)=>{ + if(da.key == currentKey){ + currentIndex = i; + } + if(da.key == targetKey){ + targetIndex = i; + } + }); + if(currentIndex < targetIndex){ + data.splice(targetIndex, 0, data.splice(currentIndex, 1).shift()); + }else{ + data.splice((targetIndex+1), 0, data.splice(currentIndex, 1).shift()); + } this.setState({ - data: data, + data, }); } @@ -645,7 +666,7 @@ class Table extends Component { indent={indent} indentSize={props.indentSize} needIndentSpaced={needIndentSpaced} - className={className} + className={`${className} ${this.props.rowDraggAble?' row-dragg-able ':''}`} record={record} expandIconAsCell={expandIconAsCell} onDestroy={this.onRowDestroy} @@ -680,6 +701,7 @@ class Table extends Component { rowDraggAble={this.props.rowDraggAble} onDragRow={this.onDragRow} contentTable={this.contentTable} + tableUid = {this.tableUid} /> ); this.treeRowIndex++; diff --git a/src/Table.scss b/src/Table.scss index a93cf00..fc02bed 100644 --- a/src/Table.scss +++ b/src/Table.scss @@ -647,7 +647,17 @@ $icon-color:#505F79; ::-webkit-scrollbar-track-piece { display: none; } + + .row-dragg-able{ + cursor:move; + } + .u-table-drag-hidden-cont{ + width: 100px; + height: 40px; + } + } + .u-table:focus{ outline: none; // border-color: #9ecaed; diff --git a/src/TableRow.js b/src/TableRow.js index 7aa8224..02b6ddb 100644 --- a/src/TableRow.js +++ b/src/TableRow.js @@ -133,6 +133,11 @@ class TableRow extends Component{ target = Event.getTarget(event); this.currentIndex = target.getAttribute("data-row-key"); this._dragCurrent = target; + + //TODO 自定义图像后续需要增加。 + // let crt = this.synchronizeTableTrShadow(); + // document.getElementById(this.props.tableUid).appendChild(crt); + // event.dataTransfer.setDragImage(crt, 0, 0); event.dataTransfer.effectAllowed = "move"; event.dataTransfer.setData("Text", this.currentIndex); } @@ -150,17 +155,42 @@ class TableRow extends Component{ let {rowDraggAble,onDragRow} = this.props; let event = Event.getEvent(e) , _target = Event.getTarget(event),target = _target.parentNode; - let currentIndex = target.getAttribute("data-row-key"); - if(!currentIndex || currentIndex === this.currentIndex)return; + + 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(this.currentIndex,null); + this.synchronizeTableTr(currentKey,null); + this.synchronizeTableTr(targetKey,null); // target.setAttribute("style",""); // this.synchronizeTrStyle(this.currentIndex,false); } - let _currentIndex = event.dataTransfer.getData("text"); - onDragRow && onDragRow(parseInt(this.currentIndex--),parseInt(currentIndex--)); + onDragRow && onDragRow(currentKey,targetKey); }; + + /** + *同步当前拖拽到阴影 + * @memberof TableRow + */ + synchronizeTableTrShadow = ()=>{ + let {contentTable,index} = this.props; + + let _table_cont = contentTable.querySelector('.u-table-scroll table tbody').getElementsByTagName("tr")[index], + _table_trs = _table_cont.getBoundingClientRect(), + _table_fixed_left_trs = contentTable.querySelector('.u-table-fixed-left table tbody').getElementsByTagName("tr")[index].getBoundingClientRect(), + _table_fixed_right_trs = contentTable.querySelector('.u-table-fixed-right table tbody').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"; + style += "height:"+ _table_trs.height+"px"; + style += "classname:"+ _table_cont.className; + div.setAttribute("style",style); + return div; + } + + /** * 同步自己,也需要同步当前行的行显示 */