easyui dialog自定義可拖曳

     看到標題的朋友必定會以爲本人很奇怪，easyui的dialog不是自帶可拖曳的屬性嗎。是的，dialog繼承了Window的一個屬性draggable，設爲true以後，窗口即可以拖曳。事實是，一，easyui的draggable屬性是綁定在窗口的title屬性上的，能使用draggable屬性的前提是必須保留dialog的標題欄，但不得不說，我實在對dialog的標題樣式不太滿意，尋找半天也沒找到dialog標題樣式修改的地方，若是朋友你看知道的話，能夠方便回覆告訴我，謝謝；二，easyui的可拖曳屬性能夠隨意拖動窗口到任意地方，甚至超出網頁邊界。我又是個強迫症比較厲害的人，so。。。

     好了，進入正題。怎麼樣讓咱們的不須要easyui內置標題的dialog窗口在必定範圍中拖曳呢。

 //dialog拖動
    $(".move").add(".window-shadow").mousedown(function(e)//e鼠標事件
    {

        var offset = $(this).offset();//DIV在頁面的位置
        var x = e.pageX - offset.left;//得到鼠標指針離DIV元素左邊界的距離
        var y = e.pageY - offset.top;//得到鼠標指針離DIV元素上邊界的距離
        $(document).bind("mousemove",function(ev)//綁定鼠標的移動事件，由於光標在DIV元素外面也要有效果，因此要用doucment的事件，而不用DIV元素的事件
        {
            $(".window").add(".window-shadow").stop();//加上這個以後

            var _x = ev.pageX - x;//得到X軸方向移動的值
            var _y = ev.pageY - y;//得到Y軸方向移動的值

            //在該DIV的範圍內拖動
            var pElement = $("body"),
                pWidth = pElement.width(),
                pHeight = pElement.height();
            //移動的div，以window爲例
            var element = $(".window"),
                eWidth = element.width(),
                eHeight = element.height();
            if(_x+eWidth>pWidth){
                _x=pWidth-eWidth;
            }
            if(_x<0){
                _x=0;
            }
            if(_y<0){
                _y=0;
            }
            if(_y+eHeight>pHeight){
                _y=pHeight-eHeight;
            }
            $(".window").add(".window-shadow").animate({left:_x+"px",top:_y+"px"},10);
        });
    });

    $(document).mouseup(function()
    {
        //  $(".window").add(".window-shadow").css("cursor","default");
        $(this).unbind("mousemove");
    })
})

className="move"和「window-shadow」正是鼠標劃過顯示鼠標樣式顯示爲移動的區域

附上css :

.move{
    width:650px;
    height: 50px;
    cursor:move;
}

這樣鼠標劃過move所在區域，就會顯示移動樣式，鼠標點擊拖動就能夠在必定範圍內拖動整個dialog。嗯~~也許你們沒我這麼強迫症，可是做爲前端開發人員，適時的強迫症也是須要的吧。