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代码,用以防止图片撑破页面
Mar 12 Javascript
测试JavaScript字符串处理性能的代码
Dec 07 Javascript
jquery提示 &quot;object expected&quot;的解决方法
Dec 13 Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
jQuery防止click双击多次提交及传递动态函数或多参数
Apr 02 Javascript
超漂亮的jQuery图片轮播特效
Nov 24 Javascript
原生JS实现拖拽图片效果
Aug 27 Javascript
JS制作适用于手机和电脑的通知信息效果
Oct 28 Javascript
实例解析Array和String方法
Dec 14 Javascript
Angular.js实现多个checkbox只能选择一个的方法示例
Feb 24 Javascript
新手简单了解vue
May 29 Javascript
前端vue+express实现文件的上传下载示例
Feb 18 Vue.js
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
PHP4之真OO
2006/10/09 PHP
PHP4.04简明安装
2006/10/09 PHP
php中AES加密解密的例子小结
2014/02/18 PHP
学习php设计模式 php实现建造者模式
2015/12/07 PHP
jQuery 创建Dom元素
2010/05/07 Javascript
JavaScript全排列的六种算法 具体实现
2013/06/29 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
2013/11/19 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
showModalDialog模态对话框的使用详解以及浏览器兼容
2014/01/11 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
选择复选框按钮置灰否则按钮可用
2014/05/22 Javascript
jQuery使用animate创建动画用法实例
2015/08/07 Javascript
详解js中构造流程图的核心技术JsPlumb
2015/12/08 Javascript
利用Javascript实现BMI计算器
2016/08/16 Javascript
最全面的JS倒计时代码
2016/09/17 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
2017/02/07 Javascript
jQuery插件FusionCharts绘制的2D帕累托图效果示例【附demo源码】
2017/03/28 jQuery
详解vue.js下引入百度地图jsApi的两种方法
2018/07/27 Javascript
jQuery实现动画、消失、显现、渐出、渐入效果示例
2018/09/06 jQuery
Vue axios全局拦截 get请求、post请求、配置请求的实例代码
2018/11/28 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
[01:03]DOTA2新的征程 你的脚印值得踏上
2014/08/13 DOTA
[03:53]2016国际邀请赛中国区预选赛第三日TOP10精彩集锦
2016/06/29 DOTA
Python中编写ORM框架的入门指引
2015/04/29 Python
python获取元素在数组中索引号的方法
2015/07/15 Python
使用Python3内置文档高效学习以及官方中文文档
2019/05/19 Python
新手入门Python编程的8个实用建议
2019/07/12 Python
Python中变量的输入输出实例代码详解
2019/07/28 Python
django 外键创建注意事项说明
2020/05/20 Python
化工专业大学生职业生涯规划书
2014/01/14 职场文书
即将毕业大学生自荐信
2014/01/24 职场文书
经济信息系毕业生自荐信范文
2014/03/15 职场文书
五水共治一句话承诺
2014/05/30 职场文书
英语自我介绍演讲稿
2014/09/01 职场文书
公司放假通知范文
2015/04/14 职场文书
2015年学校政教工作总结
2015/07/20 职场文书