修改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 相关文章推荐
Prototype RegExp对象 学习
Jul 19 Javascript
让IE6支持min-width和max-width的方法
Jun 25 Javascript
基于jQuery的仿flash的广告轮播
Nov 05 Javascript
JavaScript 中的日期和时间及表示标准介绍
Aug 21 Javascript
js生成缩略图后上传并利用canvas重绘
May 15 Javascript
jQuery使用after()方法在元素后面添加多项内容的方法
Mar 26 Javascript
在Ubuntu系统上安装Node.JS的教程
Oct 15 Javascript
mpvue小程序循环动画开启暂停的实现方法
May 15 Javascript
layui实现给某一列加点击事件
Oct 26 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 Javascript
Vue实现购物小球抛物线的方法实例
Nov 22 Vue.js
vue3种table表格选项个数的控制方法
Apr 14 Vue.js
在线引用最新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更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
在smarty中调用php内置函数的方法
2013/02/07 PHP
PHP+jQuery 注册模块的改进(三):更新到Smarty3.1
2014/10/14 PHP
php简单实现快速排序的方法
2015/04/04 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
PHP使用curl函数发送Post请求的注意事项
2016/11/26 PHP
php二维码生成以及下载实现
2017/09/28 PHP
javascript之函数直接量(function(){})()
2007/06/29 Javascript
jquery 单击li防止重复加载的实现代码
2010/12/24 Javascript
JavaScript 垃圾回收机制分析
2013/10/10 Javascript
利用浏览器全屏api实现js全屏
2014/01/16 Javascript
JS中判断null、undefined与NaN的方法
2014/03/24 Javascript
微信小程序局部刷新触发整页刷新效果的实现代码
2018/11/21 Javascript
NodeJs 文件系统操作模块fs使用方法详解
2018/11/26 NodeJs
JS对象和字符串之间互换操作实例分析
2019/02/02 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
微信小程序里引入SVG矢量图标的方法
2019/09/20 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
2019/11/07 Javascript
Python变量和数据类型详解
2017/02/15 Python
python WindowsError的错误代码详解
2017/07/23 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
Python列表对象实现原理详解
2019/07/01 Python
django基于cors解决跨域请求问题详解
2019/08/06 Python
django之自定义软删除Model的方法
2019/08/14 Python
Python时间差中seconds和total_seconds的区别详解
2019/12/26 Python
世界首屈一指的在线男士内衣权威:HisRoom
2017/08/05 全球购物
Farfetch香港官网:汇集全球时尚奢侈品购物平台
2017/11/26 全球购物
SK-II神仙水美国官网:SK-II美国
2020/02/25 全球购物
技术总监管理岗位职责
2014/03/09 职场文书
本科生自荐信
2014/06/18 职场文书
骨干教师申报材料
2014/12/17 职场文书
感谢信范文大全
2015/01/23 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
退休欢送会致辞
2015/07/31 职场文书
高中生物教学反思
2016/02/20 职场文书
TensorFlow中tf.batch_matmul()的用法
2021/06/02 Python