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数组操作学习总结
Nov 04 Javascript
javascript贪吃蛇完整版(源码)
Dec 09 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
根据配置文件加载js依赖模块
Dec 29 Javascript
javascript制作2048游戏
Mar 30 Javascript
javascript引用类型指针的工作方式
Apr 13 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
原生Javascript插件开发实践
Jan 18 Javascript
最基础的vue.js双向绑定操作
Aug 23 Javascript
原生js添加一个或多个类名的方法分析
Jul 30 Javascript
JavaScript 作用域实例分析
Oct 02 Javascript
原生js实现二级联动菜单
Nov 27 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 strstr查找字符串中是否包含某些字符的查找函数
2010/06/03 PHP
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
Yii2使用小技巧之通过 Composer 添加 FontAwesome 字体资源
2014/06/22 PHP
php实现的SESSION类
2014/12/02 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
php生成验证码,缩略图及水印图的类分享
2016/04/07 PHP
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
javascript的console.log()用法小结
2012/05/31 Javascript
js新闻滚动 js如何实现新闻滚动效果
2013/01/07 Javascript
js相册效果代码(点击创建即可)
2013/04/16 Javascript
javascript将相对路径转绝对路径示例
2014/03/14 Javascript
JQuery实现动态适时改变字体颜色的方法
2015/03/10 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
javascript实现的图片预览功能
2017/03/25 Javascript
AngularJS中使用ngModal模态框实例
2017/05/27 Javascript
深入浅析Nodejs的Http模块
2017/06/20 NodeJs
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
举例讲解Python编程中对线程锁的使用
2016/07/12 Python
使用Selenium破解新浪微博的四宫格验证码
2018/10/19 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
Python闭包思想与用法浅析
2018/12/27 Python
python打印异常信息的两种实现方式
2019/12/24 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
IE9下html5初试小刀
2010/09/21 HTML / CSS
html5贪吃蛇游戏使用63行代码完美实现
2013/06/25 HTML / CSS
html5 viewport使用方法示例详解
2013/12/02 HTML / CSS
详解html5 canvas 微信海报分享(个人爬坑)
2018/01/12 HTML / CSS
耐克亚太地区:Nike APAC
2019/12/07 全球购物
护理专业自荐书
2014/06/04 职场文书
JS前端轻量fabric.js系列之画布初始化
2022/08/05 Javascript