JS和jQuery实现表格拖拉

总结： 

通过jQuery和原生JS的拖拉写法，有以下总结。
1.假如获取div元素高宽。jQuery使用$("div").width();JS使用$("div")[0].offsetWidth/clientWidth/scrollWidth
  (1)scrollWidth：对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。
  (2)clientWidth：对象内容的可视区的宽度，不包滚动条等边线，会随对象显示大小的变化而改变。
  (3)offsetWidth：对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。
  (4)$("div").width():不包括边线
2.假如获取div元素左边距和上边局。jQuery使用$("div").offset.left/position().left。JS使用$("div")[0].offsetLeft
  (1)offset.left:获取元素距离窗口的偏移位
  (2)position().left:获取元素距离定位元素的偏移位
  (3)offsetLeft:获取元素距离定位元素的偏移位
  即：jQuery中的position().left与JS中的offsetLeft效果相同，都是获取相对于定位元素的左边距
  注意在设置边距的大小时：jQuery中，$("div").offset({left:10})可以，
                        $("div").position({left:10})不可以，若想改变它距离定位元素的偏移位，用$("div").css({left:10px})
3.JS中可以使用document.onmousemove，jQuery却不能使用$("document"),可用$("html")代替

JS实现表格拖拉

     function dragFunction(header,table) {
            var disX=0;
            var disY=0;
            //拖拉信息框函数
            header.onmousedown=function (ev) {
                var oEvent=ev||event;       //为了浏览器的兼容
                disX=oEvent.clientX-table.offsetLeft;//mousedown的时候获取鼠标的位置，并计算鼠标到div左边与上边的距离
                disY=oEvent.clientY-table.offsetTop;
                document.onmousemove=function (ev) {  //为何是document的onmousemove，而不是div，是因为鼠标移的快的时候，离开了div，而就不会再执行这个函数，即鼠标移动得快，div就跟不了鼠标
                    var oEvent=ev||event;
                    var l=oEvent.clientX-disX;  //mousemove的时候，将鼠标的位置减去点击的时候鼠标与div的距离来控制div跟着鼠标走
                    var t=oEvent.clientY-disY;
                    if(l<0)     //防止div跑到页面外
                    {
                        l=0;
                    }
                    else if(l>document.documentElement.clientWidth-table.offsetWidth)
                    {
                        l=document.documentElement.clientWidth-table.offsetWidth;
                    }
                    if(t<0)
                    {
                        t=0;
                    }
                    else if (t>document.documentElement.clientHeight-table.offsetHeight)
                    {
                        t=document.documentElement.clientHeight-table.offsetHeight;
                    }
                    table.style.left=l+"px";
                    table.style.top=t+"px";
                };
                /*mouseup的时候，将mousemove和mousedown为null，为何是document而不是div，因为当鼠标移动到网
                页上面的时候，被一块东西挡着了，这个时候此时up，并不会执行此函数，即，up后，div还不会停止
                */
                document.onmouseup=function () {
                    document.onmousemove=null;
                    header.onmouseup=null;
                }

            };
        }

jQuery实现表格的拖拉

    dragFunction:function(header,table) {
            var disX=0;
            var disY=0;
            header.mousedown(function (ev) {
                console.log(table[0].offsetTop);
                //为了浏览器的兼容
                var oEvent=ev||event;
                disX=oEvent.clientX-table.offset().left;
                disY=oEvent.clientY-table.offset().top;
                //为何是 $("html").mousemove而不是table.mousemove,因为鼠标移动过快的话，就会立刻table，造成move失效
                $("html").mousemove(function (ev) {
                    var oEvent=ev||event;
                    var l=oEvent.clientX-disX;
                    var t=oEvent.clientY-disY;
                    //防止div跑到页面外
                    if(l<0)
                    {
                        l=0;
                    }
                    else if(l>$("body").width()-table.width())
                    {
                        l=$("body").width()-table.width();
                    }
                    if(t<0)
                    {
                        t=0;
                    }
                    else if (t>$("body").height()-table.height())
                    {
                        t=$("body").height()-table.height();
                    }
                    table.css({
                        left:l,
                        top:t
                    })
                });
                $("html").mouseup(function () {
                    $("html").off("mousemove");
                    $("html").off("mouseup");
                })

            })

    }