javascript--盒子拖动

javascript实现拖动效果

作为前端一员，在平时的项目中会经常出现拖动效果，当然也有很多类似的插件，可以实现这些效果，但是究竟如何实现拖动，或者说javascript 实现拖动效果的原理是什么？

下面案例就是js原生代码实现的拖动效果：

html代码:

<div id="box">被拖动的盒子</div>

css代码:

#box{
        width:200px;
        height:200px;
        background:red;
        position:absolute;
        top:108px;
        left:200px;
    }

js代码:

window.onload = function () {
            var box = document.getElementById("box");
            var pboxX = null;
            var pboxY = null;
            box.onmousedown = function (event) {
                // 事件兼容处理
                var ev = document.all ? event : window.event;
                //鼠标按下时在页面中的坐标位置
                var pageX = ev.pageX || ev.clientX + document.documentElement.scrollLeft;
                var pageY = ev.pageY || ev.clientY + document.documentElement.scrollTop;
            
                //鼠标按下时，鼠标位置距离盒子的距离
                pboxX = pageX - box.offsetLeft;
                pboxY = pageY - box.offsetTop;
         

                document.onmousemove = function (event) {
　　　　　　　　　　　　//这里用document是防止拖拽过程幅度太大，造成一定的偏差
                    var ev = document.all ? event : window.event;
                    //鼠标移动时在页面中的坐标位置
                    var pageX = ev.pageX || ev.clientX + document.documentElement.scrollLeft;
                    var pageY = ev.pageY || ev.clientY + document.documentElement.scrollTop;
                   
                    //鼠标移动时盒子的位置
                    box.style.left = pageX - pboxX + "px";
                    box.style.top = pageY-pboxY + "px";
                   
                    //清除选中的默认行为
                    window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();
                }
                
            }
            box.onmouseup = function (event) {
                document.onmousemove = null;//同一个对象上移动和抬起只能绑定之一（这种绑定事件方式，一个对象只能绑定一个事件）
                // 时间兼容处理
                var ev = document.all ? event : window.event;
                //鼠标抬起时在页面中的坐标位置
                var pageX = ev.pageX || ev.clientX + document.documentElement.scrollLeft;
                var pageY = ev.pageY || ev.clientY + document.documentElement.scrollTop;
                //鼠标抬起时盒子的位置
                    box.style.left = pageX - pboxX + "px";
                    box.style.top = pageY-pboxY + "px";
                }
        }