文档章节

easyui dialog自定义可拖曳

MissGu
 MissGu
发布于 2015/04/12 21:35
字数 579
阅读 4.1K
收藏 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
北碚
私信 提问
加载中

评论(0)

jQuery-EasyUI 1.2.3 发布

Current Version: 1.2.3 ChangeLog: Bug window: Cannot resize the window with iframe content. fixed. tree: The node will be removed when dragging to its child. fixed. combogrid: T......

ejzhang
2011/04/26
6.2K
3
easyui的datagrid中对记录修改,修改后如何显示在前台??

获取修改的记录,修改后按确定后触发editUser(): function editUser(){ var row = $('#dg').datagrid('getSelected'); if (row){ $('#bian').dialog('open').dialog('setTitle','编辑账户'......

你我共享世界美好
2014/05/12
2.7K
2
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
780
0
easyui ajax php

easyui使用ajax 提交数据后,后台获取不到form中的值 First Name: Last Name: Phone: Email: ajax 代码 $('#fm').form('submit',{ url: url, onSubmit: function(){ return $(this).form('va......

peihongda
2013/05/24
622
2
easyui radio 无法选中的原因

背景: easyui中有一个奇怪的现象,当你在easyui-dialog中有一个form,form中又有一个radio的时候设置checked="checked"是没有选中效果的。 解决方案:把form包在easyui-dialog的外面,问题就...

Reka
04/01
0
0

没有更多内容

加载失败,请刷新页面

加载更多

类加载的过程

加载->链接->初始化; 其中链接又分为:验证->准备->解析。

曦鱼violet
14分钟前
21
0
Linux下几个与磁盘空间和文件尺寸相关的命令

硬盘是计算机非常重要的一个部件,不管是代码,还是 UI 、声音、文档,抑或是没人时偷偷看的小视频,都需要保存在硬盘里。 对于很多 Linux 服务器,会进行很多的编译操作。而编译操作在很多情...

Linux就该这么学
29分钟前
10
0
如何制作出色的R可重现示例 - How to make a great R reproducible example

问题: This post is a Community Wiki . 这篇文章是社区维基 。 Edit existing answers to improve this post. 编辑现有答案以改善此职位。 It is not currently accepting new answers. 它......

技术盛宴
35分钟前
30
0
windows下修改默认mysql编码

查看编码格式: 进入mysql执行下面语句 show variables like '%character%'; 修改编码格式: set character_set_client=utf8;set character_set_connection=utf8;set character_set_da......

珞木橘子
40分钟前
29
0
ArrayList与LinkList性能对比----新增元素

在聊到 ArrayList 和 LinkList 的时候都会这么说 ArrayList 底层是基于数组实现的内存地址物理上是连续的,新增,删除效率低,查询效率高 LinkList 是基于链表实现的,逻辑地址是连续的内存地...

Lbj虞
今天
34
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部