React实现js原生拖拽

一、三个事件：
onMousedown():鼠标按下事件
onMousemove():鼠标移动事件
onMouseup():鼠标抬起事件
在js里面原生事件直接小写不用驼峰命名法
二、实现思路
1.鼠标按下获取当前元素
2.获取鼠标的x，y坐标
3.根据鼠标的想，y坐标和当前元素的位置判断当前元素距离左侧的距离和距离顶部的距离
4.获取文档显示区的高度和宽度
5.判断是否大于显示区的宽高
三、html部分代码
 

 <div id="box"></div>

四、css部分代码
 

#box{
            width: 100px;
            height: 100px;
            background-color: #0088dd;
            /* 必须开定位 绝对定位*/
            position: absolute;
            top: 0;
            left: 0;
        }

五、js部分代码
 

    //获取元素
    const box = document.querySelector("#box");

    //绑定鼠标按下事件
    box.onmousedown = function(evt){
        const e = evt || event;

        //offsetX返回鼠标指针相对于目标元素的 x 坐标。
        const offsetX = e.offsetX;
        //offsetY返回鼠标指针相对于目标元素的 y 坐标。
        const offsetY = e.offsetY;

        //绑定鼠标移动事件
        document.onmousemove = function(evt){
            var e = evt || event;
            //pageX/pageY鼠标相对于整个页面的X/Y坐标。
            var x = e.pageX - offsetX;  //div距离浏览器left边框的距离
            var y = e.pageY - offsetY;  //div距离浏览器top边框的距离
 
            if(x < 0){
                x = 0;
            }
            if(y < 0){
                y = 0;
            }

            //window.innerWidth 获取文档显示区的宽度
            const maxLeft = window.innerWidth - box.offsetWidth;
 
            if(x > maxLeft){
                x = maxLeft;
            }

            //window.innerHeight 获取文档显示区的高度
            const maxTop = window.innerHeight - box.offsetHeight;
 
            if(y > maxTop){
                y = maxTop;
            }
 

            box.style.left = x + "px";
            box.style.top = y + "px";
        }
        document.onmouseup = function(){
            document.onmousemove = null;
        }
    }

六、React版本
 

import React, { Component } from 'react'
import './lianxi3.css'
export default class Lianxi3 extends Component {
    constructor(props){
        super(props)
        this.state={
            needX:0, //距离左右的距离
            needY:0 //距离上下的距离
        }
        this.disX =0; //起始位置的X
        this.disY = 0   //起始位置的Y
    }

    fnDown(e){
        //第二步，记录拖拽骑士位置,鼠标按下时document绑定onmousemove事件，实时改变元素的布局style
        this.disX = e.clientX - e.target.offsetLeft;
        this.disY = e.clientY - e.target.offsetTop;
        document.onmousemove = this.fnMove.bind(this)
    }
    fnMove(e){
        //获取可视化区的宽和高
        const cWidth = document.documentElement || document.body.clientWidth
        const cHeight = document.documentElement || document.body.clientHeight
        //求移动距离
        let l = e.pageX - this.disX
        let t = e.pageY - this.disY
        //限制范围
        if(l<0){
            l = 0;
        }else if(l>cWidth -e.target.offsetWidth){
            l = cWidth - e.target.offsetWidth;
        }
        if(t < 0){
            t = 0;
        }else if(t > cHeight -  e.target.offsetHeight){
            t = cHeight - e.target.offsetHeight
        }
        e.target.style.left = l +20+ 'px'
        e.target.style.top = t +30+ 'px'
        console.log(l,t)
        this.setState({
            needX:e.clientX - this.disX,
            needY:e.clientY - this.disY
        })
        e.pre
    }
    fnUp(){
        //第三步：鼠标方开始document移除onmousemove书剑
        document.onmousemove = null
    }
  render() {
    //第一步：拖拽元素绑定onmousedowm onmouseup事件
    return (
        <div className="drag">
      <div className='lianxi3' style={{left:this.state.needX,top:this.state.needY}}
      onMouseDown={this.fnDown.bind(this)}
      onMouseUp={this.fnUp.bind(this)}
      >
      </div>
      </div>
    )
  }
}