tex部分:
import { Component, createRef } from "react";
import "./index.less"
interface iProps{}
interface iState{}
interface idata{
top:number;
left:number;
}
export default class About extends Component<iProps, iState>{
elementBox = createRef<HTMLDivElement>();
disX:number = 0;
disY:number = 0;
X:number = 0;
Y:number = 0;
sData?:idata
constructor(props:iProps){
super(props);
this.state ={}
}
FnBox(){
return this.elementBox.current as HTMLDivElement
}
FnMove(ev:MouseEvent){
this.X=ev.clientX-this.disX
this.Y=ev.clientY-this.disY
this.FnBox().style.left = this.X+"px"
this.FnBox().style.top = this.Y+"px"
localStorage.sData = JSON.stringify({left:this.X,top:this.Y})
// console.log(localStorage.sData,1111);
}
FnUp(){
document.onmousemove = null;
document.onmouseup = null;
}
FnDown(ev:MouseEvent){
this.disX = ev.clientX-this.FnBox().offsetLeft;
this.disY = ev.clientY-this.FnBox().offsetTop;
document.onmousemove = this.FnMove.bind(this)
document.onmouseup=this.FnUp
return false;
// ev.preventDefault();
}
componentDidMount(){
this.FnBox().onmousedown=this.FnDown.bind(this)
if(localStorage.sData){
this.sData = JSON.parse(localStorage.sData)
console.log(this.sData,122211);
if(this.sData){
this.FnBox().style.left = this.sData.left+'px'
this.FnBox().style.top = this.sData.top+"px"
}
}
}
render(){
return(
<div className="about">
<div className="about-box" ref={this.elementBox}></div>
</div>
)
}
}
less部分:
.about{
.about-box{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
left: 0;
top: 0;
}
}