EonerCMS——做一个仿桌面系统的CMS（四）

来源：互联网发布：跃兔网络的神途哪个好编辑：程序博客网时间：2024/05/29 07:03

一晃又过去一个多星期了，途中出了个差，进度上略有耽误，不过还好，上次有个话题没说完，这次继续，就是窗口拖动以及改变窗口尺寸。

窗口拖动&改变窗口尺寸

　　因为这功能可能很多人都做过，所以我只是提供一种我的方法，当然如果有考虑不全的地方，希望大家能提出来，因为拖动层的功能我是第一次做，没太多经验，也请教了很多人。接下来就先看demo吧：

　　HTML代码如下：

view sourceprint?
<div id="movedemo"> 
    <div class="titledemo">按住我拖动</div> 
    <div style="position:absolute;overflow:hidden;top:-3px;width:100%;height:5px;z-index:1;cursor:n-resize" resize="t"></div> 
    <div style="position:absolute;overflow:hidden;right:-3px;width:5px;height:100%;z-index:1;cursor:e-resize" resize="r"></div> 
    <div style="position:absolute;overflow:hidden;bottom:-3px;width:100%;height:5px;z-index:1;cursor:s-resize" resize="b"></div> 
    <div style="position:absolute;overflow:hidden;left:-3px;width:5px;height:100%;z-index:1;cursor:w-resize" resize="l"></div> 
    <div style="position:absolute;overflow:hidden;right:-3px;top:-3px;width:10px;height:10px;z-index:2;cursor:ne-resize" resize="rt"></div> 
    <div style="position:absolute;overflow:hidden;right:-3px;bottom:-3px;width:10px;height:10px;z-index:2;cursor:se-resize" resize="rb"></div> 
    <div style="position:absolute;overflow:hidden;left:-3px;top:-3px;width:10px;height:10px;z-index:2;cursor:nw-resize" resize="lt"></div> 
    <div style="position:absolute;overflow:hidden;left:-3px;bottom:-3px;width:10px;height:10px;z-index:2;cursor:sw-resize" resize="lb"></div> 
</div>

　　在#movedemo里包了8个div，具体功能就不介绍了，不明白了去看我上一篇文章《EonerCMS——做一个仿桌面系统的CMS（三）》，我在那里对这个做了具体说明。

　　JS代码是重点，我对几个变量标明了注释，方便大家能看懂：

view sourceprint?
$().ready(function(){ 
    $("#movedemo").data("info",{width:100,height:100,left:0,top:0}); 
    $(".titledemo").bind("mousedown",function(e){ 
        x = e.screenX;  //鼠标位于屏幕的left 
        y = e.screenY;  //鼠标位于屏幕的top 
        sT = $("#movedemo").offset().top; 
        sL = $("#movedemo").offset().left; 
        $(document).bind("mousemove",function(e){ 
            eX = e.screenX; //鼠标位于屏幕的left 
            eY = e.screenY; //鼠标位于屏幕的top 
            lessX = eX - x; //距初始位置的偏移量 
            lessY = eY - y; //距初始位置的偏移量 
            _l = sL + lessX; 
            _t = sT + lessY; 
            _w = $("#movedemo").data("info").width+"px"; 
            _h = $("#movedemo").data("info").height+"px"; 
            $("#movedemo").css({width:_w,height:_h,left:_l,top:_t}); 
        }); 
    }); 
    $(document).bind("mouseup",function(){ 
        $(this).unbind("mousemove"); 
        $("#movedemo").data("info",{width:$("#movedemo").width(),height:$("#movedemo").height()}); 
    }); 
    var moveline = { 
        't':'', 
        'r':'', 
        'b':'', 
        'l':'', 
        'rt':'', 
        'rb':'', 
        'lt':'', 
        'lb':''
    }; 
    var ml=""; 
    for(ml in moveline){ 
        //依次绑定8个方向的缩放拖动事件 
        bindResize(ml); 
    } 
}); 
  
function bindResize(ml){ 
    $("#movedemo div[resize='"+ml+"']").bind("mousedown",function(e){ 
        x=(e.offsetX==undefined) ? getOffset(e).offsetX : e.offsetX ; 
        y=(e.offsetY==undefined) ? getOffset(e).offsetY : e.offsetY ; 
        cy = e.clientY; 
        cx = e.clientX; 
        h = $("#movedemo").height(); 
        w = $("#movedemo").width(); 
        $(document).unbind("mousemove").bind("mousemove",function(e){ 
            switch(ml){ 
                case "t": 
                    if(h+cy-e.clientY>50){ 
                        $("#movedemo").css("height",h+cy-e.clientY).css("top",e.clientY-y); 
                    } 
                break; 
                case "r": 
                    if(w-cx+e.clientX>100){ 
                        $("#movedemo").css("width",w-cx+e.clientX); 
                    } 
                break; 
                case "b": 
                    if(h-cy+e.clientY>50){ 
                        $("#movedemo").css("height",h-cy+e.clientY); 
                    } 
                break; 
                case "l": 
                    if(w+cx-e.clientX>100){ 
                        $("#movedemo").css("width",w+cx-e.clientX).css("left",e.clientX-x); 
                    } 
                break; 
                case "rt": 
                    if(h+cy-e.clientY>50){ 
                        $("#movedemo").css("height",h+cy-e.clientY).css("top",e.clientY-y); 
                    } 
                    if(w-cx+e.clientX>100){ 
                        $("#movedemo").css("width",w-cx+e.clientX); 
                    } 
                break; 
                case "rb": 
                    if(w-cx+e.clientX>100){ 
                        $("#movedemo").css("width",w-cx+e.clientX); 
                    } 
                    if(h-cy+e.clientY>50){ 
                        $("#movedemo").css("height",h-cy+e.clientY); 
                    } 
                break; 
                case "lt": 
                    if(w+cx-e.clientX>100){ 
                        $("#movedemo").css("width",w+cx-e.clientX).css("left",e.clientX-x); 
                    } 
                    if(h+cy-e.clientY>50){ 
                        $("#movedemo").css("height",h+cy-e.clientY).css("top",e.clientY-y); 
                    } 
                break; 
                case "lb": 
                    if(w+cx-e.clientX>100){ 
                        $("#movedemo").css("width",w+cx-e.clientX).css("left",e.clientX-x); 
                    } 
                    if(h-cy+e.clientY>50){ 
                        $("#movedemo").css("height",h-cy+e.clientY); 
                    } 
                break; 
            } 
        }); 
    }); 
} 
  
function getOffset(e){ 
    var target = e.target; 
    if (target.offsetLeft == undefined){ 
        target = target.parentNode; 
    } 
    var pageCoord = getPageCoord(target); 
    var eventCoord ={ 
        x: window.pageXOffset + e.clientX, 
        y: window.pageYOffset + e.clientY 
    }; 
    var offset = { 
        offsetX: eventCoord.x - pageCoord.x, 
        offsetY: eventCoord.y - pageCoord.y 
    }; 
    return offset; 
} 
function getPageCoord(element){ 
    var coord = {x:0, y:0}; 
    while(element){ 
        coord.x += element.offsetLeft; 
        coord.y += element.offsetTop; 
        element = element.offsetParent; 
    } 
    return coord; 
}

　　首先我给可拖动的窗口加了个data属性，用来存放width、height、top、left四个属性值，在每次移动或者改变尺寸，都对这个值进行更新并存放，目的就是当窗口最大化后，点还原可以还原到最大化前的尺寸和位置。

　　然后我对标题栏绑定了鼠标按下去的事件，然后在事件里绑定了document的鼠标滑动事件，而不是直接对标题栏绑定滑动事件，目的就是防止出现鼠标移动过快，移除标题栏那块区域，导致拖动效果一卡一卡的现象。

　　之后就是获取鼠标移动的位置，更新可拖动窗口的top和left值。

　　接着就是改变窗口尺寸，我事先先对8个div绑定好事件，然后也是用类似的方法，获取鼠标位置，更新窗口的width、height、top、left的值。值得一提的是，因为火狐不认识offsetX和offsetY，所以代码最下面有2个方法，就是用来获取火狐下offset的XY值的，调用方法就是：getOffset(e).offsetX

　　功能大致上就是这些了，因为是demo，所以细节需要大家去考虑，比如拖动到页面顶部，则不能再往上拖动，防止拖到浏览器外面，当然底部也一样。

尽量避免上面这种情况

底部我的做法是，最多拖动到标题的位置就不能再继续往下拖动了，大家可以参考下我这种做法

　　关于左右两侧，我是参考了win7里的一个小功能，就是鼠标拖动到窗口边缘时，自动把窗口变成半屏，这样的目的就是为了之后cms系统有更高效的操作，比如我要同时操作新闻栏目和新闻文章，就可以左右两边分别打开这两个页面，然后同步操作，提高效率。

　　要说的就是这么，关于拖动的demo，我提供下载地址，欢迎下载查看，因为是demo，所以没写成插件，点击下载。

　　PS：其实功能上大致已经OK了，我打算十一把细节优化一下，国庆放假回来我就先放出整个CMS的demo给大家看下，到时候还希望大家多多帮我提提意见，因为毕竟是一个人做的，考虑的东西不是很全。

　　PS2：感谢Gray Zhang（灰哥）在某js群里对我的问题给予解答

如果你读了我的文章，觉得有帮助，你可以选择：