App.tsx组件
import React from 'react';
import './App.css';
// PC端
import Drag from './hoc/drag';
// 要拖拽的盒子
function Box(){
return (
<div className='box'>测试盒子</div>
)
}
function Box2(){
return (
<div className='box'>测试盒子2</div>
)
}
function App() {
// 定义高阶组件
let Drags = Drag(Box)
let Drags2 = Drag(Box2)
return (
<div className="App">
<Drags></Drags>
<Drags2></Drags2>
</div>
);
}
export default App;
/hoc/Drag.tsx组件--PC端
import React from "react"
// 高阶组件 属性代理的模式扩展
function Drag(WrapperComponent:any){
return class extends React.Component{
// 生成随机颜色
randColor = function(){
let color:string = "#"
for(let i = 0;i < 6;i++){
let num = parseInt(String(Math.random()*16))
// 转成十六进制
color += num.toString(16)
}
return color
}
componentDidMount(): void {
// 可以在这里写拖拽逻辑
// 获取DOM元素对象
let dragList = document.querySelectorAll(".drag") as any
dragList.forEach((drag:any,index:number)=>{
drag.style.position = "absolute"
drag.style.backgroundColor = this.randColor()
let x1:number
let y1:number
let l:number
let t:number
let drags = function (event:MouseEvent){
console.log(event);
// 获取鼠标的坐标值对象
let x2 = event.clientX
let y2 = event.clientY
let left = x2 - x1 + l
let top = y2 - y1 + t
drag.style.left = left + "px"
drag.style.top = top + "px"
}
// 绑定鼠标按下事件
drag?.addEventListener("mousedown",function(event:any){
// console.log(event);
// 获取鼠标的坐标值对象
x1 = event.clientX
y1 = event.clientY
console.log(x1,y1);
// 获取盒子最初的偏移量 offsetLeft offsetTop
l = drag.offsetLeft
t = drag.offsetTop
console.log("鼠标的坐标值",x1,y1,"盒子最初的偏移量",l,t);
drag.addEventListener("mousemove",drags)
drag.addEventListener("mouseup",()=>{
drag.removeEventListener("mousemove",drags)
})
})
})
}
render(): React.ReactNode{
return (
<div className="drag">
<WrapperComponent {...this.props}></WrapperComponent>
</div>
)
}
}
}
export default Drag
/hoc/Drag.tsx组件--移动端
import React from "react";
//高阶组件,属性代理的模式扩展
function DragMobile(WrapperComponent: any) {
return class extends React.Component<any> {
//生成一个随机背景颜色的方法
randColor = function () {
let color: string = "#";
for (let i = 0; i < 6; i++) {
let num = parseInt(String(Math.random() * 16));
color += num.toString(16);
}
return color;
}
componentDidMount(): void {
//可以在这个里面写拖拽的逻辑
//1. 获取DOM元素对象
let dragList = document.querySelectorAll(".drag") as any;
dragList.forEach((drag:HTMLElement, index:number) => {
drag.style.position = "absolute";
drag.style.background = this.randColor();
//初始化一些用到的变量的值。
let x1: number, x2: number, y1: number, y2: number, l: number, t: number;
//盒子可以移动左右范围
let html = document.documentElement || document.body;
let maxW = html.clientWidth - drag.clientWidth;
//定义函数封装逻辑,
let drags = function (event: TouchEvent) {
//先获取鼠标的坐标值对象
x2 = event.targetTouches[0].pageX;
y2 = event.targetTouches[0].pageY;
//盒子移动的位置
let left = x2 - x1 + l;
let top = y2 - y1 + t;
if(left<=0){
left = 0;
}
if(top<=0){
top =0;
}
if(left>=maxW){
left = maxW
}
drag.style.left = left + "px";
drag.style.top = top + "px";
};
//绑定鼠标按下事件
drag?.addEventListener("touchstart", function (event: TouchEvent) {
console.log(event);
//先获取鼠标的坐标值对象
x1 = event.targetTouches[0].pageX;
y1 = event.targetTouches[0].pageY;
console.log(x1, y1);
// console.log((drag as any).offsetLeft);
//获取盒子最初的偏移量 offsetLeft offetTop
// let l = (this as any).offsetLeft;
l = drag.offsetLeft;
t = drag.offsetTop;
console.log(x1, y1, l, t);
//mousemove鼠标移动
drag.addEventListener("touchmove", drags)
drag.addEventListener("touchend", () => {
drag.removeEventListener("touchmove", drags);
})
})
})
}
render(): React.ReactNode {
return (
<div className="drag">
<WrapperComponent {...this.props}></WrapperComponent>
</div>
)
}
}
}
export default DragMobile;