修改Jquery Dialog 位置的实现方法


Posted in Javascript onAugust 26, 2016

今天在做一个功能的时候使用到了Jquery UI中的dialog组件,因为是一个很简单的组件,有很多功能都没有提供,比如说直接获取到dialog的位置,直接修改dialog的位置都是不行的,并且但可拖动的位置看不见的时候,这个时候就是坑了,关闭不了,也拖动不了,这个时候只能刷新页面来重新初始化界面了。

我今天解决的就是这个问题:解决这种问题有两种方式(个人认为)

1、修改属性让可拖动局域可见,进行拖动

2、不让出现可拖动区域不可见的情况。

针对第一种情况,我没有想到合适的办法。下面给出第二种情况的解决办法,原理就是判断当前dialog的位置,如果拖动位置的可能出现不可见的情况,这个时候修改dialog的位置,dialog有个方法是监听dialog拖动的,我的实现方式就是放在这个方法内的,

代码如下:

/**
* 添加拖拽监听 当UI的位置跑出屏幕外的时候 进行更新
* @param {Object} event
* @param {Object} ui
*/
drag : function(event,ui)
{
	var posX = ui.position.left;
	var posY = ui.position.top;
	if (posX < 5)
	{
		posX = 5;
	}
	if (posY < 5)
	{
		posY = 5;
	}
	ui.position.left = posX;
	ui.position.top = posY;
}

这是一段很简单的代码,没有什么可以说的地方,主要是使用ui的一些属性。

以上这篇修改Jquery Dialog 位置的实现方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Json对象与Json字符串互转(4种转换方式)
Mar 27 Javascript
Jquery封装tab自动切换效果的具体实现
Jul 13 Javascript
js 去除字符串第一位逗号的方法
Jun 07 Javascript
js 左右悬浮对联广告代码示例
Dec 12 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
Apr 24 Javascript
教你使用javascript简单写一个页面模板引擎
May 05 Javascript
jQuery fadeOut 异步实例代码详解
Aug 18 Javascript
微信小程序 实战小程序实例
Oct 08 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
如何正确理解vue中的key详解
Nov 02 Javascript
js中forEach,for in,for of循环的用法示例小结
Mar 14 Javascript
JavaScript事件委托实现原理及优点进行
Aug 29 Javascript
在线引用最新jquery文件的实现方法
Aug 26 #Javascript
纯前端JavaScript实现Excel IO案例分享
Aug 26 #Javascript
js时间比较 js计算时间差的简单实现方法
Aug 26 #Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 #Javascript
js遍历map javaScript遍历map的简单实现
Aug 26 #Javascript
谈谈JavaScript的New关键字
Aug 26 #Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
Aug 26 #Javascript
You might like
php-accelerator网站加速PHP缓冲的方法
2008/07/30 PHP
解析php防止form重复提交的方法
2013/07/01 PHP
ThinkPHP中自定义目录结构的设置方法
2014/08/15 PHP
PHP防盗链代码实例
2014/08/27 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
什么是JavaScript
2009/08/13 Javascript
JS弹出窗口的运用与技巧大全
2016/11/01 Javascript
jQuery Masonry瀑布流插件使用方法详解
2017/01/18 Javascript
JS常用知识点整理
2017/01/21 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
基于Vue.js实现tab滑块效果
2017/07/23 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
基于vue展开收起动画的示例代码
2018/07/05 Javascript
微信小程序全局变量改变监听的实现方法
2019/07/15 Javascript
vue中使用[provide/inject]实现页面reload的方法
2019/09/30 Javascript
JavaScript实现模态对话框实例
2020/01/13 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
JS判断数组四种实现方法详解
2020/06/29 Javascript
[51:28]EG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/16 DOTA
一个小示例告诉你Python语言的优雅之处
2014/07/04 Python
Linux中安装Python的交互式解释器IPython的教程
2016/06/13 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
Flask之flask-session的具体使用
2018/07/26 Python
Python设计模式之装饰模式实例详解
2019/01/21 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
韩国爱茉莉太平洋化妆品美国站:Amore Pacific US
2016/10/28 全球购物
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
师范应届生教师求职信
2013/11/05 职场文书
母亲节演讲稿
2014/05/27 职场文书
2015元旦标语横幅
2014/12/09 职场文书
2015年度个人业务工作总结
2015/04/27 职场文书
龙猫观后感
2015/06/09 职场文书
el-form每行显示两列底部按钮居中效果的实现
2022/08/05 HTML / CSS