innov
/
bee-table
1
0
Fork 0
Code Issues Pull Requests 3 Projects Releases Wiki Activity

拖拽bug fix 修复

This commit is contained in:
jonyshi 2018-05-13 11:30:32 +08:00
parent 71d5577fa1
commit 179694799f
6 changed files with 85 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
dist/demo.css vendored
View File

@ -7861,7 +7861,8 @@ ul {
.u-table-body { .u-table-body {
position: relative; } position: relative; }
.u-table-hiden-drag { .u-table-hiden-drag {
position: relative; } position: relative;
z-index: 9999; }
.u-table-hiden-drag-li { .u-table-hiden-drag-li {
position: absolute; position: absolute;
top: 0px; top: 0px;

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

49
dist/demo.js vendored
View File

@ -8165,13 +8165,14 @@
var clsPrefix = _this.props.clsPrefix; var clsPrefix = _this.props.clsPrefix;
// event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`; // event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`;
console.log("--onThMouseMove---" + _this.drag);
_this.drag.initPageLeftX = event.pageX; _this.drag.initPageLeftX = event.pageX;
_this.drag.initLeft = (0, _utils.tryParseInt)(event.target.style.left); _this.drag.initLeft = (0, _utils.tryParseInt)(event.target.style.left);
_this.drag.x = _this.drag.initLeft; _this.drag.x = _this.drag.initLeft;
_this.drag.currIndex = _this.props.rows[0].findIndex(function (da) { _this.drag.currIndex = _this.props.rows[0].findIndex(function (da) {
return da.key == data.key; return da.key == data.key;
}); });
console.log("--onThMouseMove---" + _this.border); _this.drag.width = _this.drag.data[_this.drag.currIndex].width;
}; };
_this.onMouseUp = function (event, data) { _this.onMouseUp = function (event, data) {
@ -8183,8 +8184,6 @@
_this.onThMouseUp = function (event, data) { _this.onThMouseUp = function (event, data) {
_this.border = false; _this.border = false;
var clsPrefix = _this.props.clsPrefix;
// event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap`;
}; };
_this.onThMouseMove = function (event, data) { _this.onThMouseMove = function (event, data) {
@ -8192,15 +8191,43 @@
var x = event.pageX - _this.drag.initPageLeftX + _this.drag.initLeft - 0; var x = event.pageX - _this.drag.initPageLeftX + _this.drag.initLeft - 0;
//设置hiden的left //设置hiden的left
var currentHideDom = document.getElementById("u-table-drag-hide-table").getElementsByTagName("div")[_this.drag.currIndex]; var currentHideDom = document.getElementById("u-table-drag-hide-table").getElementsByTagName("div")[_this.drag.currIndex];
currentHideDom.style.left = _this.drag.initPageLeftX + x - 15 + "px"; currentHideDom.style.left = _this.drag.initPageLeftX + x - 16 + "px";
// currentHideDom.style.width = ((this.props.rows[0])[this.drag.currIndex]).width+"px";
// console.log("--------------",x);
// console.log("----",(currentHideDom[this.drag.currIndex]).offsetLeft);
// // console.log(" ==== ",this.props.rows[0][this.drag.currIndex])
// for(let i = this.drag.currIndex ; i < currentHideDom.length; i ++){
// // console.log("----",currentHideDom[i].offsetLeft);
// let _daWidth = (this.props.rows[0][this.drag.currIndex]).width;
// currentHideDom[i].style.left = (_daWidth +x-15)+"px";
// // if(i == this.drag.currIndex){
// // }
// // currentHideDom[i].style.left = (this.drag.initPageLeftX+x-15)+"px";
// }
//设置当前的宽度 //设置当前的宽度
// event.target.style.width = (data.width+x)+"px"; // event.target.style.width = (data.width+x)+"px";
var currentData = _this.drag.data[_this.drag.currIndex];
// currentData.width = ((this.props.rows[0])[this.drag.currIndex].width+x);
currentData.width = _this.drag.width + x;
console.log("-----currentData.width---------" + x, currentData.width);
var currentDom = document.getElementById("u-table-drag-thead").getElementsByTagName("th")[_this.drag.currIndex]; var currentDom = document.getElementById("u-table-drag-thead").getElementsByTagName("th")[_this.drag.currIndex];
currentDom.style.width = data.width + x + "px"; currentDom.style.width = currentData.width + "px";
//设置他的后一个的宽度 //设置他的后一个的宽度
var currentLastDom = document.getElementById("u-table-drag-thead").getElementsByTagName("div")[_this.drag.currIndex + 1]; // let currentLastDom = document.getElementById("u-table-drag-thead").getElementsByTagName("div")[this.drag.currIndex+1];
var _x = x < 0 ? -1 * x : x; // let _x = x<0?(-1*x):x;
currentLastDom.style.left = _this.drag.initPageLeftX + x + "px"; // currentLastDom.style.left = (this.drag.initPageLeftX+x)+"px";
_this.drag.x = x;
// console.log("--------------",this.drag);
// console.log("----------pppp----",this.props.rows[0]);
}; };
_this.currentObj = null; _this.currentObj = null;
@ -8208,8 +8235,12 @@
_this.drag = { _this.drag = {
initPageLeftX: 0, initPageLeftX: 0,
initLeft: 0, initLeft: 0,
x: 0 x: 0,
width: 0
}; };
var _da = {};
_extends(_da, _this.props.rows[0]);
_this.drag.data = JSON.parse(JSON.stringify(_this.props.rows[0]));
_this.state = { _this.state = {
border: false border: false
}; };

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
src/Table.scss
View File

@ -27,7 +27,7 @@ $table-move-in-color: $bg-color-base;
} }
&-hiden-drag{ &-hiden-drag{
position: relative; position: relative;
// z-index: 9999; z-index: 9999;
&-li{ &-li{
position: absolute; position: absolute;

50
src/TableHeader.js
View File

@ -19,8 +19,12 @@ class TableHeader extends Component{
this.drag = { this.drag = {
initPageLeftX:0, initPageLeftX:0,
initLeft:0, initLeft:0,
x:0 x:0,
width:0
} }
let _da = {};
Object.assign(_da,this.props.rows[0]);
this.drag.data = JSON.parse(JSON.stringify(this.props.rows[0]));
this.state = { this.state = {
border:false border:false
} }
@ -76,12 +80,12 @@ class TableHeader extends Component{
this.border = true; this.border = true;
const {clsPrefix} = this.props; const {clsPrefix} = this.props;
// event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`; // event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`;
console.log("--onThMouseMove---"+this.drag);
this.drag.initPageLeftX = event.pageX; this.drag.initPageLeftX = event.pageX;
this.drag.initLeft = tryParseInt(event.target.style.left); this.drag.initLeft = tryParseInt(event.target.style.left);
this.drag.x = this.drag.initLeft; this.drag.x = this.drag.initLeft;
this.drag.currIndex = this.props.rows[0].findIndex(da=>da.key==data.key); this.drag.currIndex = this.props.rows[0].findIndex(da=>da.key==data.key);
console.log("--onThMouseMove---"+this.border); this.drag.width = this.drag.data[this.drag.currIndex].width;
} }
onMouseUp=(event,data)=>{ onMouseUp=(event,data)=>{
this.border = false; this.border = false;
@ -90,8 +94,6 @@ class TableHeader extends Component{
} }
onThMouseUp=(event,data)=>{ onThMouseUp=(event,data)=>{
this.border = false; this.border = false;
const {clsPrefix} = this.props;
// event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap`;
} }
onThMouseMove=(event,data)=>{ onThMouseMove=(event,data)=>{
@ -99,15 +101,43 @@ class TableHeader extends Component{
let x = (event.pageX - this.drag.initPageLeftX) + this.drag.initLeft-0; let x = (event.pageX - this.drag.initPageLeftX) + this.drag.initLeft-0;
//设置hiden的left //设置hiden的left
let currentHideDom = document.getElementById("u-table-drag-hide-table").getElementsByTagName("div")[this.drag.currIndex]; let currentHideDom = document.getElementById("u-table-drag-hide-table").getElementsByTagName("div")[this.drag.currIndex];
currentHideDom.style.left = (this.drag.initPageLeftX+x-15)+"px"; currentHideDom.style.left = (this.drag.initPageLeftX+x-16)+"px";
// currentHideDom.style.width = ((this.props.rows[0])[this.drag.currIndex]).width+"px";
// console.log("--------------",x);
// console.log("----",(currentHideDom[this.drag.currIndex]).offsetLeft);
// // console.log(" ==== ",this.props.rows[0][this.drag.currIndex])
// for(let i = this.drag.currIndex ; i < currentHideDom.length; i ++){
// // console.log("----",currentHideDom[i].offsetLeft);
// let _daWidth = (this.props.rows[0][this.drag.currIndex]).width;
// currentHideDom[i].style.left = (_daWidth +x-15)+"px";
// // if(i == this.drag.currIndex){
// // }
// // currentHideDom[i].style.left = (this.drag.initPageLeftX+x-15)+"px";
// }
//设置当前的宽度 //设置当前的宽度
// event.target.style.width = (data.width+x)+"px"; // event.target.style.width = (data.width+x)+"px";
let currentData = this.drag.data[this.drag.currIndex];
// currentData.width = ((this.props.rows[0])[this.drag.currIndex].width+x);
currentData.width = this.drag.width + x;
console.log("-----currentData.width---------"+x,currentData.width);
let currentDom = document.getElementById("u-table-drag-thead").getElementsByTagName("th")[this.drag.currIndex]; let currentDom = document.getElementById("u-table-drag-thead").getElementsByTagName("th")[this.drag.currIndex];
currentDom.style.width = (data.width+x)+"px"; currentDom.style.width = (currentData.width)+"px";
//设置他的后一个的宽度 //设置他的后一个的宽度
let currentLastDom = document.getElementById("u-table-drag-thead").getElementsByTagName("div")[this.drag.currIndex+1]; // let currentLastDom = document.getElementById("u-table-drag-thead").getElementsByTagName("div")[this.drag.currIndex+1];
let _x = x<0?(-1*x):x; // let _x = x<0?(-1*x):x;
currentLastDom.style.left = (this.drag.initPageLeftX+x)+"px"; // currentLastDom.style.left = (this.drag.initPageLeftX+x)+"px";
this.drag.x = x;
// console.log("--------------",this.drag);
// console.log("----------pppp----",this.props.rows[0]);
} }
render() { render() {