react按钮拖拽_react 拖拽

最近做一个功能，一个点击按钮，需要支持拖拽。完成后谢在这里做一下笔记。

export default class Record extends Component {

constructor(props) {

super(props);

// 限制最大宽高，不让滑块出去

this.dragLimit = {

maxW: null,

maxH: null,

};

this.timer = null;

}

// 认购记录拖拽

recordDrag = (e) => {

if (this.timer) {

clearTimeout(this.timer);

this.timer = null;

}

this.timer = setTimeout(() => {

// 执行点击事件

window.location.hash = `#${Routers.Record}`;

}, 500);

const ev = e || window.event;

const touch = ev.targetTouches[0];

const bragBox = document.querySelector('#apply-record');

const containerBox = document.querySelector('#cal-wrap');

if (!bragBox || !containerBox) {

return;

}

if (this.dragLimit.maxW === null || this.dragLimit.maxH === null) {

this.dragLimit = {

maxW: containerBox.clientWidth - bragBox.offsetWidth,

maxH: containerBox.clientHeight - bragBox.offsetHeight,

};

}

// 手指触摸开始，记录盒子的初始位置

const oL = touch.clientX - bragBox.offsetLeft;

const oT = touch.clientY - bragBox.offsetTop;

// 触摸中的，位置记录

bragBox.addEventListener('touchmove', (e1) => {

if (this.timer) {

clearTimeout(this.timer);

this.timer = null;

}

const ev1 = e1 || window.event;

const touch1 = ev1.targetTouches[0];

let oLeft = touch1.clientX - oL;

let oTop = touch1.clientY - oT;

if (oLeft < 0) {

oLeft = 0;

} else if (oLeft >= this.dragLimit.maxW) {

oLeft = this.dragLimit.maxW;

}

if (oTop < 0) {

oTop = 0;

} else if (oTop >= this.dragLimit.maxH) {

oTop = this.dragLimit.maxH;

}

bragBox.style.left = `${oLeft}px`;

bragBox.style.top = `${oTop}px`;

});

// 触摸结束时的处理

bragBox.addEventListener('touchend', () => {

document.removeEventListener('touchmove', (evt) => {

// 阻止默认事件

evt.preventDefault();

});

});

}

render() {

return (

...

{/* 认购记录 */}

...

);

}

}