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 相关文章推荐
Javascript操作cookie的函数代码
Oct 03 Javascript
JavaScript中window、doucment、body的解释
Aug 14 Javascript
JS实现图片横向滚动效果示例代码
Sep 04 Javascript
css配合jquery美化 select
Nov 29 Javascript
document.compatMode的CSS1compat使用介绍
Apr 03 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
深入理解JavaScript 函数
Jun 06 Javascript
JavaScript面试开发常用的知识点总结
Aug 08 Javascript
Javascript 6里的4个新语法
Aug 25 Javascript
ajax请求data遇到的问题分析
Jan 18 Javascript
vue 实现上传组件
May 31 Vue.js
js 数组 fill() 填充方法
Nov 02 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
使用php4加速网络传输
2006/10/09 PHP
yii实现级联下拉菜单的方法
2014/07/31 PHP
php按字符无乱码截取中文的方法
2015/03/27 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
Prototype使用指南之dom.js
2007/01/10 Javascript
Div Select挡住的解决办法
2008/08/07 Javascript
Jquery 动态生成表格示例代码
2013/12/24 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
jQuery基础知识点总结(DOM操作)
2016/06/01 Javascript
基于JavaScript代码实现自动生成表格
2016/06/15 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
详解使用angular框架离线你的应用(pwa指南)
2019/01/31 Javascript
Vue+Django项目部署详解
2019/05/30 Javascript
vue实现瀑布流组件滑动加载更多
2020/03/10 Javascript
vue a标签点击实现赋值方式
2020/09/07 Javascript
Python单元测试简单示例
2018/07/03 Python
基于numpy中的expand_dims函数用法
2019/12/18 Python
在python中使用nohup命令说明
2020/04/16 Python
css3实现文字扫光渐变动画效果的示例
2017/11/07 HTML / CSS
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
印度首选时尚目的地:Reliance Trends
2018/01/17 全球购物
英国领先的男装设计师服装购物网站:Mainline Menswear
2018/02/04 全球购物
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
企业授权委托书范本
2014/04/02 职场文书
入股协议书
2014/04/14 职场文书
幼儿园中班上学期评语
2014/04/18 职场文书
个人收入证明模板
2014/09/18 职场文书
幼儿园园长个人总结
2015/03/02 职场文书
高中政治教学反思
2016/02/23 职场文书
Jackson 反序列化时实现大小写不敏感设置
2021/06/29 Java/Android
Python 数据可视化神器Pyecharts绘制图像练习
2022/02/28 Python
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL