react+ts仿文件夹拖拽九宫格拖拽

index.tsx:

import React, { Component, createRef } from 'react'
import "./index.less"
interface props{
    
}
interface start{

}
export default class index extends Component<props,start> {
    code=createRef<HTMLDivElement>()
    codeel?:HTMLCollection;
    mx: number=0;
    my: number=0;
    oldw: number=0;
    oldh: number=0;
    oldl: number=0;
    oldt: number=0;
    tx: number=0;
    ty: number=0;
    nxw: number=0;
    nxh: number=0;
    nxl: number=0;
    nxt: number=0;
    Fncode(){
        return this.code.current as HTMLDivElement
    }
    Fndowe(obj:HTMLDivElement,ev:MouseEvent){
        //  obj.className.indexOf获取到了右边这个盒子
        if (obj.className.indexOf('r')!==-1) {
            // 获取鼠标点击的位置x轴
            this.mx=ev.clientX
            // 获取到整个大盒子的宽度
            this.oldw=this.Fncode().offsetWidth
        }
        if (obj.className.indexOf('b')!==-1) {
            // 获取鼠标点击的位置y轴
            this.my=ev.clientY
            // 获取到整个大盒子的高度
            this.oldh=this.Fncode().offsetHeight
        }
        if (obj.className.indexOf('l')!==-1) {
            // 获取鼠标点击的位置x轴
            this.mx=ev.clientX
            // 获取到整个大盒子的宽度
            this.oldw=this.Fncode().offsetWidth
            // 获取盒子的长度
            this.oldl=this.Fncode().offsetLeft
        }
        if(obj.className.indexOf('t')!==-1){
            this.my=ev.clientY
            this.oldh=this.Fncode().offsetHeight
            this.oldt=this.Fncode().offsetTop
        }
        document.onmousemove=this.FnMove.bind(this,obj as HTMLDivElement)
        document.onmouseup=this.Fnup.bind(this)
    }
    FnMove(obj:HTMLDivElement,ev:MouseEvent){
        //  obj.className.indexOf获取到了右边这个盒子
        if (obj.className.indexOf('r')!==-1) {
            // 获取盒子拖动的宽度 就是盒子拖动后的宽度减去盒子的宽度得出了盒子拖动的宽度
            this.tx=ev.clientX-this.mx;
            // 得出盒子拖动后的宽度加上盒子总宽度就得出了拖动后的盒子宽度的值
            this.nxw=this.oldw+this.tx
            // 把得出的值与大盒子的宽度相加
            this.Fncode().style.width=this.nxw+'px'
        }
        if (obj.className.indexOf('b')!==-1) {
            // 获取盒子拖动的高度 就是盒子拖动后的高度减去盒子的高度得出了盒子拖动的高度
            this.ty=ev.clientY-this.my;
            // 得出盒子拖动后的高度加上盒子总高度就得出了拖动后的盒子高度的值
            this.nxh=this.oldh+this.ty
            // 把得出的值与大盒子的高度相加
            this.Fncode().style.height=this.nxh+'px'
        
        }
        if (obj.className.indexOf('l')!==-1) {
            this.tx=ev.clientX-this.mx;
            this.nxw=this.oldw-this.tx
            this.nxl=this.oldl+this.tx
            this.Fncode().style.width=this.nxw+'px'
            this.Fncode().style.left=this.nxl+'px'
            console.log(222);
        }
        if (obj.className.indexOf('t')!==-1) {
            this.ty=ev.clientY-this.my;
            this.nxh=this.oldh-this.ty
            this.nxt=this.oldt+this.ty
            this.Fncode().style.height=this.nxh+'px'
            this.Fncode().style.top=this.nxt+'px'
            console.log(222);
        }
       
    }
    Fnup(){
        document.onmousemove=null
        document.onmouseup=null
    }
    Fnds(obj:HTMLDivElement){
        obj.onmousedown=this.Fndowe.bind(this,obj as HTMLDivElement)
    }
    componentDidMount(){
        // 获取盒子的子元素
        this.codeel=this.Fncode().children;
        // 利用for循环判断出子元素的下标
        for (let i = 0; i < this.codeel.length; i++) {
            this.Fnds.bind(this,this.codeel[i] as HTMLDivElement)();
        }
    }
  render() {
    return (
      <div className='code'>
        <div className='code-list' ref={this.code}>
            <div className='l'></div>
            <div className='r'></div>
            <div className='t'></div>
            <div className='b'></div>
            <div className='lt'></div>
            <div className='lb'></div>
            <div className='rt'></div>
            <div className='rb'></div>
        </div>
      </div>
    )
  }
}

index.less:

.code{
    // width: 200px;
    // height: 200px;
    // background-color: aqua;
    .code-list{
        width: 200px;
    height: 200px;
    background-color: aqua;
    position: absolute;
        .r,.l{
            width: 10px;
            height: 100%;
            background-color: black;
            position: absolute;
        }
        .t,.b{
            width: 100%;
            height: 10px;
            background-color: black;
            position: absolute;
        }
        .t{
            top: 0;
        }
        .l{
            left: 0;
        }
        .r{
            right:0;
        }
        .b{
            bottom: 0;
        }
        .lt{
            left: 0;
            top: 0;
        }
        .lb{
            bottom: 0;
            left: 0;
        }
        .rb{
            bottom: 0;
            right: 0;
        }
        .rt{
            top: 0;
            right: 0;
        }
        .lt,.lb{
            width: 20px;
            height: 20px;
            background-color: red;
            position: absolute;
        }
        .rt,.rb{
            width: 20px;
            height: 20px;
            background-color: red;
            position: absolute;
        }
        
    }
}