easyui dialog自定义可拖曳

为什么80%的码农都做不了架构师？>>>   

     看到标题的朋友一定会觉得本人很奇怪，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。嗯~~也许大家没我这么强迫症，但是作为前端开发人员，适时的强迫症也是需要的吧。

转载于:https://my.oschina.net/missGu/blog/399288