文档章节

easyui dialog自定义可拖曳

MissGu
 MissGu
发布于 2015/04/12 21:35
字数 579
阅读 2599
收藏 0

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

© 著作权归作者所有

共有 人打赏支持
MissGu
粉丝 3
博文 5
码字总数 2899
作品 0
北碚
jQuery easyui官方文档翻译 - 基础总览

jQuery easyui官方文档翻译web版:http://easydoc.cloudfoundry.com/doc/easyui/1.2.5/ Documentation Each component of easyui has properties, methods and events. Users can extend the......

noday
2012/03/26
0
0
python 写的selenium脚本不能循环,循环时会报 [WinError 10053] 你的主机中的软件中止了一个已建立的连接。错误,求大佬解答下

用python写了一段自动化脚本,在循环的时候报ConnectionAbortedError: [WinError 10053] 你的主机中的软件中止了一个已建立的连接。错误,第一次执行没有问题,就是不能循环,求个大神解答下...

自学测试的小白
07/05
0
0
jQuery EasyUI快速入门实战教程(一)-入门

1、jQuery EasyUI概述 jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,...

神码小风
06/28
0
0
关于EasyUI使用tree方法生成树形结构加载两次的问题

html代码中利用class声明了easyui-tree,导致easyUI解析class代码的时候先解析class声明中的easyui-tree这样组件就请求了一次url;然后又调用js初始化代码请求一次url。这样导致了重复加载,解...

Doublec
2015/04/21
0
0
easyui 框架Layout插件

1:引入的css: <link rel="stylesheet" href="${rc.contextPath}/static/easyui/themes/custom/easyui.css"> <link rel="stylesheet" href="${rc.contextPath}/static/easyui/themes/icon.css......

赵作文
2015/11/16
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

qduoj~前端~二次开发~打包docker镜像并上传到阿里云容器镜像仓库

上一篇文章https://my.oschina.net/finchxu/blog/1930017记录了怎么在本地修改前端,现在我要把我的修改添加到部署到本地的前端的docker容器中,然后打包这个容器成为一个本地镜像,然后把这...

虚拟世界的懒猫
今天
1
0
UML中 的各种符号含义

Class Notation A class notation consists of three parts: Class Name The name of the class appears in the first partition. Class Attributes Attributes are shown in the second par......

hutaishi
今天
1
0
20180818 上课截图

小丑鱼00
今天
1
0
Springsecurity之SecurityContextHolderStrategy

注:下面分析的版本是spring-security-4.2.x,源码的github地址是: https://github.com/spring-projects/spring-security/tree/4.2.x 先上一张图: 图1 SecurityContextHolderStrategy的三个......

汉斯-冯-拉特
今天
1
0
LNMP架构(Nginx负载均衡、ssl原理、生成ssl密钥对、Nginx配置ssl)

Nginx负载均衡 网站的访问量越来越大,服务器的服务模式也得进行相应的升级,比如分离出数据库服务器、分离出图片作为单独服务,这些是简单的数据的负载均衡,将压力分散到不同的机器上。有时...

蛋黄_Yolks
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部