JSFiddle - React, Tailwind, and code Playground

by Kang Yuan

HTML

<div class="wrap">
        <div id="boxmove" style="left:150px;top:150px;"> movebox </div>
    </div>

CSS

#boxmove{
        position: absolute;
        width: 200px;
        border:1px solid #ccc;
        height: 200px;
        color: red;
        background-color: blue;
        text-align: center;
        font-size: 30px;
    }

JavaScript

var o,   //捕获到的事件
          X,  //boxmove水平宽度
          Y;  //boxmove垂直高度
    function getObject(obj,e){    //获取捕获到的对象
        o = obj;
        // document.all（IE）使用setCapture方法绑定；其余比如FF使用Window对象针对事件的捕捉
        document.all?o.setCapture() : window.captureEvents(Event.MOUSEMOVE);  
        X = e.clientX - parseInt(o.style.left);   //获取宽度，
        Y = e.clientY - parseInt(o.style.top);   //获取高度，
    }
    document.getElementById("boxmove").onmousedown = function(e){ 
        getObject(this,e||event);       //boxmove捕获事件并处理  e-->FF  window.event-->IE
    };
    document.onmousemove = function(dis){    //鼠标移动事件处理
        if(!o){  
            return;
        }
        if(!dis){  //事件
            dis = event ;
        }
        o.style.left = dis.clientX - X +"px";     //设定boxmovebox样式随鼠标移动而改变
        o.style.top = dis.clientY - Y + "px";
    };
    document.onmouseup = function(){    //鼠标松开事件处理
        if(!o){   
            return;
        }
        // document.all（IE）使用releaseCapture解除绑定；其余比如FF使用window对象针对事件的捕捉
        document.all?o.releaseCapture() : window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP)
        o = '';   //还空对象
    };