拖拽任意元素

其原理如下:
1.点击某个元素后，计算出当前鼠标位置和元素top和left的距离disX，disY.如图:

2.然后拖拽到某个地方后，再计算出元素左上角的坐标,如图:

3.之后直接给元素的left，top赋值就可以了.

JS代码如下:

 window.onload = function () {
            var aDiv = document.getElementsByTagName('div');
            var zIndex = 0;
            for(var i =0;i<aDiv.length;i++)
            {
                aDiv[i].onmousedown = function (ev) {
                    this.style.zIndex = ++zIndex;
                    drag(this, ev);
                    return false;  //阻止默认事件,当拖拽的时候不会触发其它事件,例如选中其它文字，图片.
                }
            }
        };
        //拖拽函数
        function drag(obj,ev)//这个ev是obj的鼠标事件 {
            var pos = getPos(ev);
            var disX = pos.x - obj.offsetLeft;
            var disY = pos.y - obj.offsetTop;
            document.onmousemove = function (ev) //这个ev是document的鼠标事件 {
                var pos = getPos(ev);   //获取鼠标位置
                var l = pos.x - disX;   //(l,t)是元素左上角的坐标
                var t = pos.y - disY;

                //不让元素移出可视区
                if(l<0)
                    l = 0;
                else if(l > document.documentElement.clientWidth - obj.offsetWidth)
                    l = document.documentElement.clientWidth - obj.offsetWidth;
                if(t<0)
                    t = 0;
                else if(t > document.documentElement.clientHeight - obj.offsetHeight)
                    t = document.documentElement.clientHeight - obj.offsetHeight;
                //移动元素
                obj.style.left = l + 'px';
                obj.style.top = t + 'px';
            };
            document.onmouseup = function () {
                document.onmousemove = null;   //停止移动
                document.onmouseup = null;     //不需要的函数赋值为null
                if(obj.releaseCapture)    //解锁
                    obj.releaseCapture();
            };
            if(obj.setCapture)     //让所有的事件响应都锁定到obj上
                obj.setCapture();
        }
        //获取位置
        function getPos(ev) {
            var oEvent = ev||event;  //兼容事件
            //如果有滑动条的话，要加上滑了的位置,因为oEvent.clientX是可视区的坐标.
            var scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
            var scrollLeft = document.documentElement.scrollLeft||document.body.scrollLeft;
            return {x:oEvent.clientX + scrollLeft,y:oEvent.clientY + scrollTop};//返回一个JSON数组
        }