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 相关文章推荐
jQuery 插件 将this下的div轮番显示
Apr 09 Javascript
jquery easyui的tabs使用时的问题
Mar 23 Javascript
jQuery实现仿百度帖吧头部固定导航效果
Aug 07 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
JavaScript动态添加css样式和script标签
Jul 19 Javascript
让浏览器崩溃的12行JS代码(DoS攻击分析及防御)
Oct 10 Javascript
鼠标点击input,显示瞬间的边框颜色,对之修改与隐藏实例
Dec 26 Javascript
Vue中this.$router.push参数获取方法
Feb 27 Javascript
webpack4 SplitChunks实现代码分隔详解
May 23 Javascript
webpack.DefinePlugin与cross-env区别详解
Feb 23 Javascript
jQuery 实现扁平式小清新导航
Jul 07 jQuery
浅谈JavaScript中this的指向问题
Jul 28 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
PHP 分页类(模仿google)-面试题目解答
2009/09/13 PHP
使用Linux五年积累的一些经验技巧
2013/06/20 PHP
PHP5中GD库生成图形验证码(有汉字)
2013/07/28 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
javascript 跳转代码集合
2009/12/03 Javascript
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
2013/08/02 Javascript
JavaScript之IE的fireEvent方法详细解析
2013/11/20 Javascript
Javascript添加监听与删除监听用法详解
2014/12/19 Javascript
javascript实现带节日和农历的日历特效
2015/02/01 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
javascript动画之模拟拖拽效果篇
2016/09/26 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
Vue.js开发环境搭建
2016/11/10 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
Vue.js 2.5新特性介绍(推荐)
2017/10/24 Javascript
细述Javascript的加法运算符的具体使用
2019/10/18 Javascript
JS原型prototype和__proto__用法实例分析
2020/03/14 Javascript
跟老齐学Python之使用Python查询更新数据库
2014/11/25 Python
Python多线程编程简单介绍
2015/04/13 Python
将Python的Django框架与认证系统整合的方法
2015/07/24 Python
Python内置函数—vars的具体使用方法
2017/12/04 Python
Python多线程同步---文件读写控制方法
2019/02/12 Python
Python生成器实现简单&quot;生产者消费者&quot;模型代码实例
2020/03/27 Python
Python基于requests实现模拟上传文件
2020/04/21 Python
Python之变量类型和if判断方式
2020/05/05 Python
html5 canvas的绘制文本自动换行的示例代码
2018/09/17 HTML / CSS
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
美津浓美国官网:Mizuno美国
2018/08/07 全球购物
全球性的在线商店:Vogca
2019/05/10 全球购物
优秀应届毕业生自荐信
2013/11/16 职场文书
《小池塘》教学反思
2014/02/28 职场文书
2014乡镇“三八”国际劳动妇女节活动总结
2014/03/01 职场文书
药品营销专业毕业生自荐信
2014/07/02 职场文书
「玫瑰之王的葬礼」舞台剧主视觉图公开
2022/03/21 日漫
nginx七层负载均衡配置详解
2022/07/15 Servers