修改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 相关文章推荐
如何获取JQUERY AJAX返回的JSON结果集实现代码
Dec 10 Javascript
jQuery下实现等待指定元素加载完毕(可改成纯js版)
Jul 11 Javascript
教你如何在 Javascript 文件里使用 .Net MVC Razor 语法
Jul 23 Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
谈谈JavaScript中function多重理解
Aug 28 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
Vue系列:通过vue-router如何传递参数示例
Jan 16 Javascript
Node.js连接mongodb实例代码
Jun 06 Javascript
使用classList来实现两个按钮样式的切换方法
Jan 24 Javascript
使用vue-cli打包过程中的步骤以及问题的解决
May 08 Javascript
详谈Vue.js框架下main.js,App.vue,page/index.vue之间的区别
Aug 12 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
关于手调机和数调机的选择
2021/03/02 无线电
ThinkPHP之R方法实例详解
2014/06/20 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
ThinkPHP和UCenter接口冲突的解决方法
2016/07/25 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
Mac系统下安装PHP Xdebug
2018/03/30 PHP
CLASS_CONFUSION JS混淆 全源码
2007/12/12 Javascript
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
jquery模拟LCD 时钟的html文件源代码
2014/06/16 Javascript
javascript常用正则表达式汇总
2015/07/31 Javascript
详解javascript数组去重问题
2015/11/06 Javascript
jquery选择器中的空格与大于号&gt;、加号+与波浪号~的区别介绍
2016/06/24 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
nodejs入门教程五:连接数据库的方法分析
2017/04/24 NodeJs
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
2019/08/16 Javascript
node解析修改nginx配置文件操作实例分析
2019/11/06 Javascript
400多行Python代码实现了一个FTP服务器
2012/05/10 Python
Python实现提取谷歌音乐搜索结果的方法
2015/07/10 Python
Window 64位下python3.6.2环境搭建图文教程
2018/09/19 Python
使用Python Pandas处理亿级数据的方法
2019/06/24 Python
Python vtk读取并显示dicom文件示例
2020/01/13 Python
python实现飞船大战
2020/04/24 Python
PyTorch中clone()、detach()及相关扩展详解
2020/12/09 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
Python爬虫之Selenium库的使用方法
2021/01/03 Python
美国家喻户晓的保健品品牌:Vitamin World(维他命世界)
2016/08/19 全球购物
澳大利亚牛仔裤商店:Just Jeans
2016/10/13 全球购物
英国领先的家庭时尚品牌:Peacocks
2018/01/11 全球购物
在校生汽车维修实习自我鉴定
2013/09/19 职场文书
化学学院毕业生自荐信范文
2013/12/17 职场文书
意向书范文
2014/03/31 职场文书
大学迎新标语
2014/06/26 职场文书
单位个人查摆问题及整改措施
2014/10/28 职场文书
vue @click.native 绑定原生点击事件
2022/04/22 Vue.js