修改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 相关文章推荐
js传值 判断
Oct 26 Javascript
关于IE7 IE8弹出窗口顶上
Dec 22 Javascript
用JS写的一个TableView控件代码
Jan 23 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
javascript实现网页字符定位的方法
Jul 14 Javascript
jQuery同步提交示例代码
Dec 12 Javascript
jqPlot jQuery绘图插件的使用
Jun 18 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 Javascript
详解wepy开发小程序踩过的坑(小结)
May 22 Javascript
基于js判断浏览器是否支持webGL
Apr 18 Javascript
原生JS实现微信通讯录
Jun 18 Javascript
基于vue--key值的特殊用处详解
Jul 31 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
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
PHP在线生成二维码(google api)的实现代码详解
2013/06/04 PHP
解析在apache里面给php写虚拟目录的详细方法
2013/06/24 PHP
php中动态修改ini配置
2014/10/14 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
PHP简单实现数字分页功能示例
2016/08/24 PHP
laravel dingo API返回自定义错误信息的实例
2019/09/29 PHP
javascript 表单验证常见正则
2009/09/28 Javascript
基于jquery自定义的漂亮单选按钮RadioButton
2013/11/19 Javascript
HTML,CSS,JavaScript速查表推荐
2014/12/02 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
JavaScript中的Math.sin()方法使用详解
2015/06/15 Javascript
详解Webwork中Action 调用的方法
2016/02/02 Javascript
js模拟支付宝密码输入框
2017/04/11 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python re正则表达式模块(Regular Expression)
2014/07/16 Python
在Docker上部署Python的Flask框架的教程
2015/04/08 Python
将TensorFlow的模型网络导出为单个文件的方法
2018/04/23 Python
Python连接Redis的基本配置方法
2018/09/13 Python
python把1变成01的步骤总结
2019/02/27 Python
Python web如何在IIS发布应用过程解析
2020/05/27 Python
CSS3实现10种Loading效果
2016/07/11 HTML / CSS
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
FitFlop澳大利亚官网:英国符合人体工学的鞋类品牌
2017/06/05 全球购物
养殖人员的创业计划书范文
2013/12/26 职场文书
客户表扬信范文
2014/01/10 职场文书
认购协议书范本
2014/04/22 职场文书
营运督导岗位职责
2015/04/10 职场文书
2015年度保密工作总结
2015/04/24 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
警示教育片观后感
2015/06/17 职场文书
vue整合百度地图显示指定地点信息
2022/04/06 Vue.js
Nginx的gzip相关介绍
2022/05/11 Servers