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 相关文章推荐
实现只能输入数字的input不用replace方法
Sep 12 Javascript
jQuery中对未来的元素绑定事件用bind、live or on
Apr 17 Javascript
asp.net中oracle 存储过程(图文)
Aug 12 Javascript
设计模式中的组合模式在JavaScript程序构建中的使用
May 18 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
JS导出PDF插件的方法(支持中文、图片使用路径)
Jul 12 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
学习使用bootstrap的modal和carousel
Dec 09 Javascript
jQuery表格的维护和删除操作
Feb 03 Javascript
DVA框架统一处理所有页面的loading状态
Aug 25 Javascript
微信小程序实现倒计时补零功能
Jul 09 Javascript
利用layer实现表单完美验证的方法
Sep 26 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
建立文件交换功能的脚本(一)
2006/10/09 PHP
详解PHP显示MySQL数据的三种方法
2008/06/05 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
如何在Mozilla Gecko 用Javascript加载XSL
2007/01/09 Javascript
简单的js分页脚本
2009/05/21 Javascript
jquery统计用户选中的复选框的个数
2014/06/06 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
javascript实现状态栏文字首尾相接循环滚动的方法
2015/07/22 Javascript
js实现继承的5种方式
2015/12/01 Javascript
js为什么不能正确处理小数运算?
2015/12/29 Javascript
纯JS实现轮播图
2017/02/22 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
JS中SetTimeout和SetInterval使用初探
2017/03/23 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
微信小程序实现点击文字页面跳转功能【附源码下载】
2017/12/12 Javascript
JS实现动态生成html table表格的方法分析
2018/07/11 Javascript
python 脚本生成随机 字母 + 数字密码功能
2018/05/26 Python
浅析python的Lambda表达式
2019/02/27 Python
一个可以套路别人的python小程序实例代码
2019/04/09 Python
Python使用dict.fromkeys()快速生成一个字典示例
2019/04/24 Python
pandas 使用均值填充缺失值列的小技巧分享
2019/07/04 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
使用python实现飞机大战游戏
2020/03/23 Python
django自定义非主键自增字段类型详解(auto increment field)
2020/03/30 Python
python Zmail模块简介与使用示例
2020/12/19 Python
python实现经典排序算法的示例代码
2021/02/07 Python
Space NK英国站:英国热门美妆网站
2017/12/11 全球购物
俄罗斯品牌服装在线商店:VIPAVENUE
2020/08/10 全球购物
会计学财务管理专业个人的自我评价
2013/10/19 职场文书
应届生法律顾问求职信
2013/11/19 职场文书
25岁生日感言
2014/01/13 职场文书
领导视察通讯稿
2015/07/18 职场文书
寒假致家长的一封信
2015/10/10 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
python控制台打印log输出重复的解决方法
2021/05/14 Python
weblogic服务建立数据源连接测试更新mysql驱动包的问题及解决方法
2022/01/22 MySQL