js拖拽功能

//获取到box元素

    var box = document.querySelector('.box');

    //调用拖拽功能

    drag(box);

    //将拖拽功能封装到drag函数中，以便多次调用

    //参数：开启拖拽的元素

    function drag(obj) {

//点击box移动box的位置

        obj.onmousedown =function (event) {

//设置box捕获所有鼠标按下的事件，只有ie支持

            obj.setCapture && box.setCapture();

            //获取box元素的偏移量

            var boxLeft = event.clientX - obj.offsetLeft;

            var boxTop = event.clientY - obj.offsetTop;

            //鼠标移动时，box跟着移动

            document.onmousemove =function (event) {

//获取鼠标的坐标

                event = event || window.event;

                var x = event.clientX - boxLeft;

                var y = event.clientY - boxTop;

                //改变box的位置,box跟着鼠标移动

                obj.style.left = x +'px';

                obj.style.top = y +'px';

            }

//鼠标松开时，box停止移动

            document.onmouseup =function () {

document.onmousemove =null;

                document.onmouseup =null;

                //当鼠标松开，取消对事件的捕获

                obj.releaseCapture && obj.releaseCapyure();

            }

/*

            * 当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎搜索内容            * 此时会导致拖拽功能的异常，这个是浏览器提供的默认行为            * 如果不希望这个行为的发生，则可以通过return false来取消            * 但是ie8不支持            * 需要先用setCapture捕获事件，然后releaseCapture取消事件*/

            return false;

        }

}

}