fix: stop drag when distance is less than 100

This commit is contained in:
gx 2021-04-21 17:22:26 +08:00
parent e9f3088eb0
commit 74737239c3
7 changed files with 48 additions and 4 deletions

View File

@ -638,6 +638,7 @@ var _initialiseProps = function _initialiseProps() {
var currentObj = _this7.table.cols[currentIndex];
_this7.drag.currIndex = currentIndex;
_this7.drag.oldLeft = event.clientX;
_this7.drag.currentLeft = event.clientX;
_this7.drag.oldWidth = parseInt(currentObj.style.width);
_this7.drag.minWidth = currentObj.style.minWidth != "" ? parseInt(currentObj.style.minWidth) : defaultWidth;
_this7.drag.tableWidth = parseInt(_this7.table.table.style.width ? _this7.table.table.style.width : _this7.table.table.scrollWidth);
@ -664,6 +665,11 @@ var _initialiseProps = function _initialiseProps() {
}
}
_this7.drag.fixedType = fixedType;
if (fixedType === 'left' && _this7.table.fixedRightBodyTable) {
_this7.drag.fixedRightBodyTableLeft = _this7.table.fixedRightBodyTable.getBoundingClientRect().left;
} else {
_this7.drag.fixedRightBodyTableLeft = null;
}
} else if (type != 'online' && _this7.props.draggable) {
// if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
if (!_this7.props.draggable) return;
@ -726,10 +732,18 @@ var _initialiseProps = function _initialiseProps() {
var event = _utils.Event.getEvent(e);
if (_this7.props.dragborder && _this7.drag.option == "border") {
//移动改变宽度
var isMoveToRight = _this7.drag.currentLeft < event.clientX;
if (_this7.drag.fixedType === 'left' && isMoveToRight && _this7.drag.fixedRightBodyTableLeft) {
if (_this7.drag.fixedRightBodyTableLeft - event.clientX < 100) {
return; // 拖动左侧固定列离右侧固定列距离小于100时禁止拖动
}
}
var currentCols = _this7.table.cols[_this7.drag.currIndex];
var diff = event.clientX - _this7.drag.oldLeft;
var newWidth = _this7.drag.oldWidth + diff;
_this7.drag.newWidth = newWidth > 0 ? newWidth : _this7.minWidth;
_this7.drag.currentLeft = event.clientX;
// displayinrow 判断、 固定行高判断
if (!bodyDisplayInRow) {

View File

@ -33,6 +33,7 @@ const columns = [
{
title: "联系人",
dataIndex: "d",
fixed: 'right',
key: "d",
width: 500,
}

File diff suppressed because one or more lines are too long

17
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -1,6 +1,6 @@
{
"name": "bee-table",
"version": "2.3.15-beta.22",
"version": "2.3.15-beta.23",
"description": "Table ui component for react",
"keywords": [
"react",

View File

@ -287,6 +287,7 @@ class TableHeader extends Component {
let currentObj = this.table.cols[currentIndex];
this.drag.currIndex = currentIndex;
this.drag.oldLeft = event.clientX;
this.drag.currentLeft = event.clientX;
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);
@ -313,6 +314,11 @@ class TableHeader extends Component {
}
}
this.drag.fixedType = fixedType;
if (fixedType === 'left' && this.table.fixedRightBodyTable) {
this.drag.fixedRightBodyTableLeft = this.table.fixedRightBodyTable.getBoundingClientRect().left
} else {
this.drag.fixedRightBodyTableLeft = null
}
}else if(type != 'online' && this.props.draggable){
// if (!this.props.draggable || targetEvent.nodeName.toUpperCase() != "TH") return;
if (!this.props.draggable) return;
@ -373,10 +379,18 @@ class TableHeader extends Component {
let event = Event.getEvent(e);
if(this.props.dragborder && this.drag.option == "border"){
//移动改变宽度
const isMoveToRight = this.drag.currentLeft < event.clientX
if (this.drag.fixedType === 'left' && isMoveToRight && this.drag.fixedRightBodyTableLeft) {
if (this.drag.fixedRightBodyTableLeft - event.clientX < 100) {
return // 拖动左侧固定列离右侧固定列距离小于100时禁止拖动
}
}
let currentCols = this.table.cols[this.drag.currIndex];
let diff = (event.clientX - this.drag.oldLeft);
let newWidth = this.drag.oldWidth + diff;
this.drag.newWidth = newWidth > 0 ? newWidth : this.minWidth;
this.drag.currentLeft = event.clientX;
// displayinrow 判断、 固定行高判断
if(!bodyDisplayInRow) {