jQuery EasyUI Dialog拖不下来如何解决


Posted in Javascript onSeptember 28, 2015

使用jquery easyui可以很容易的创建很炫的前台页面,最近在使用过程中发现dialog存在一个问题:

 用户将dialog拖出页面后,dialog就不能拖下来了,除非要重新打开页面,这个问题对于用户体验来说是非常重要的,

所以就开始研究easyu API看看有没有相应的函数或者事件去处理,结果发现没有现成,只好自己想了个办法:

思路如下:

          使用panel的onOpen事件,取得diglog的原始left和top

          当用户在拖动dialog过程中,使用panel的onMove事件取得dialog所在父页面body的width和height,

通过计算,当用户将diglog拖动出body时,使用panel的move函数将dialog移动到初始的位置。

经过测试次方法可行,代码如下所示:

var default_left;
var default_top;
$('#details_dd').dialog({
  title:'详细信息',
  modal: true,
  onOpen:function(){ 
  //dialog原始left
  default_left=$('#details_dd').panel('options').left; 
     //dialog原始top
   default_top=$('#details_dd').panel('options').top;     
},
  onMove:function(left,top){ //鼠标拖动时事件
   var body_width=document.body.offsetWidth;//body的宽度
   var body_height=document.body.offsetHeight;//body的高度
   var dd_width= $('#details_dd').panel('options').width;//dialog的宽度
   var dd_height= $('#details_dd').panel('options').height;//dialog的高度    
   if(left<1||left>(body_width-dd_width)||top<1||top>(body_height-dd_height)){
      $('#details_dd').dialog('move',{  
   left:default_left,  
   top:default_top  
   }); 
    }
}
});

有些问题就需要大家一起讨论研究才会有所收获,本文分享的jQuery EasyUI Dialog拖不下来的解决办法,希望可以对大家的学习有所帮助,帮助大家顺利解决jQuery EasyUI Dialog拖不下来的问题。

Javascript 相关文章推荐
用js实现键盘方向键翻页功能的代码
Jun 03 Javascript
javascript StringBuilder类实现
Dec 22 Javascript
来自国外的页面JavaScript文件优化
Dec 08 Javascript
JS字符串函数扩展代码
Sep 13 Javascript
js无刷新操作table的行和列
Mar 27 Javascript
js的flv视频播放器插件使用方法
Jun 23 Javascript
如何解决谷歌浏览器下jquery无法获取图片的尺寸
Sep 10 Javascript
Angular ng-class详解及实例代码
Sep 19 Javascript
将form表单通过ajax实现无刷新提交的简单实例
Oct 12 Javascript
canvas实现流星雨的背景效果
Jan 13 Javascript
浅谈angularjs依赖服务注入写法的注意点
Apr 24 Javascript
基于js实现的图片拖拽排序源码实例
Nov 04 Javascript
JQuery实现左右滚动菜单特效
Sep 28 #Javascript
JS动态日期时间的获取方法
Sep 28 #Javascript
js电话号码验证方法
Sep 28 #Javascript
JavaScript多图片上传案例
Sep 28 #Javascript
JavaScript判断FileUpload控件上传文件类型
Sep 28 #Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
Sep 28 #Javascript
JS实现淘宝支付宝网站的控制台菜单效果
Sep 28 #Javascript
You might like
Linux环境下搭建php开发环境的操作步骤
2013/06/17 PHP
linux下安装php的memcached客户端
2014/08/03 PHP
完美实现wordpress禁止文章修订和自动保存的方法
2014/11/03 PHP
PHP正则表达式入门教程(推荐)
2016/05/18 PHP
Laravel中Facade的加载过程与原理详解
2017/09/22 PHP
jQuery 技巧大全(新手入门篇)
2009/05/12 Javascript
JavaScript简单实现网页回到顶部功能
2013/11/12 Javascript
javascript表格隔行变色加鼠标移入移出及点击效果的方法
2015/04/10 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
2016/01/27 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
jquery插件方式实现table查询功能的简单实例
2016/06/06 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
如何提高数据访问速度
2016/12/26 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
2017/07/20 Javascript
Vue实现按钮旋转和移动位置的实例代码
2018/08/09 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
vue-router 2.0 跳转之router.push()用法说明
2020/08/12 Javascript
Python简单实现的代理服务器端口映射功能示例
2018/04/08 Python
Python解决八皇后问题示例
2018/04/22 Python
Python参数解析模块sys、getopt、argparse使用与对比分析
2019/04/02 Python
Python pandas DataFrame操作的实现代码
2019/06/21 Python
Python3.7实现验证码登录方式代码实例
2020/02/14 Python
浅谈Keras的Sequential与PyTorch的Sequential的区别
2020/06/17 Python
详解Pytorch显存动态分配规律探索
2020/11/17 Python
米兰必去买手店排行榜首位:Antonioli
2016/09/11 全球购物
企业项目策划书
2014/01/11 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
小学生五年级大队长竞选发言稿
2014/09/12 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
博士导师推荐信
2015/03/25 职场文书
项目经理助理岗位职责
2015/04/13 职场文书
2015年污水处理厂工作总结
2015/05/26 职场文书
小学新课改心得体会
2016/01/22 职场文书
《社戏》教学反思
2016/02/22 职场文书
GO中sync包自由控制并发示例详解
2022/08/05 Golang