JavaScript实现简单拖拽效果

// html<div>    <p>我是个蓝色的盒子</p></div>

CSS*{margin: 0;padding: 0;}        div{            width: 100px;            height: 100px;            background-color: cornflowerblue;            position: absolute;        }        p{            width: 100px;            height: 100px;            line-height: 100px;            font-size: 10px;            color: #fff;            text-align: center;            transition: .5s all;        }        p:hover{            transform: translateY(-5px);            transition: .5s all;            box-shadow: 10px 10px 5px gray;}

var div = document.querySelector('div');        var p   = document.querySelector('p');        // 先定义初始化变量x、y        var x =0;        var y = 0;        // var i = 3;        var TorF= false;        //盒子里的文字无法被选中        div.onselectstart = function (e) {            return false;        }        div.addEventListener('mousedown',function(e){            // client：鼠标按钮时输出鼠标指针的坐标            x = e.clientX;            y = e.clientY;            // 格式：obj.offsetLeft:获取左和上的偏移量            // 在这里特别说明一下:这个属性是只读的，不能够赋值。            // 返回当前元素距离父元素(body)左边的距离            // 这里的l，t并不是声明了一个全局变量，而是创建了一个全局对象的属性。            l = div.offsetLeft;            t = div.offsetTop;            // 鼠标设置移动箭头            div.style.cursor =  'move';            p.innerHTML =  '我被按下了 ^_^';            TorF= true;        });        // 当整个屏幕触发移动事件时        document.addEventListener('mousemove',function(e){            // 如果为false则终止函数的执行并返回函数的值            if (Torf == false) {                return;             }            // 在此函数中定义局部变量            var twox = e.clientX;            var twoy = e.clientY;            // 用获取到的鼠标指针的坐标 - (鼠标指针的坐标 - 偏移量) = 实际鼠标拖动的位置            // 后面一定要加上px单位，因为本身获取是没有单位的            var twol = twox - (x-l);            var twot = twoy - (y-t);             div.style.left = twol+'px';            div.style.top = twot+'px';            p.innerHTML =  '我正在被拖动  -.-';        });        div.addEventListener('mouseup',function(){            // 松开键盘时停止鼠标移动事件            TorF= false;            // 鼠标恢复默认样式            div.style.cursor = 'default';            p.innerHTML =  '我被弹开了QAQ'; })