修改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文件传参数(详解)
Jul 13 Javascript
了不起的node.js读书笔记之node.js中的特性
Dec 22 Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 Javascript
jquery实现不包含当前项的选择器实例
Jun 25 Javascript
js跨域资源共享 基础篇
Jul 02 Javascript
Bootstrap笔记之缩略图、警告框实例详解
Mar 09 Javascript
微信小程序 后台登录(非微信账号)实例详解
Mar 31 Javascript
前端自动化开发之Node.js的环境搭建教程
Apr 01 Javascript
JS实现的Unicode编码转换操作示例
Apr 28 Javascript
Vue弹出菜单功能的实现代码
Sep 12 Javascript
JS获取本地地址及天气的方法实例小结
May 10 Javascript
vue 判断元素内容是否超过宽度的方式
Jul 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中 === 的使用
2016/10/24 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
Docker 安装 PHP并与Nginx的部署实例讲解
2021/02/27 PHP
兼容ie和firefox js关闭代码
2008/12/11 Javascript
JavaScript 函数式编程的原理
2009/10/16 Javascript
将CKfinder整合进CKEditor3.0的新方法
2010/01/10 Javascript
线路分流自动智能跳转代码,自动选择最快镜像网站(js)
2011/10/31 Javascript
js调用图片隐藏&amp;显示实现代码
2013/09/13 Javascript
jQuery轻松实现表格的隔行变色和点击行变色的实例代码
2016/05/09 Javascript
Boostrap实现的登录界面实例代码
2016/10/09 Javascript
jQuery中用on绑定事件时需注意的事项
2017/03/19 Javascript
layer ui插件显示tips时,修改字体颜色的实现方法
2019/09/11 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
vue实现购物车选择功能
2020/01/10 Javascript
JavaScript实现轮播图效果
2020/10/30 Javascript
[08:47]DOTA2每周TOP10 精彩击杀集锦vol.6
2014/06/25 DOTA
Python语言的12个基础知识点小结
2014/07/10 Python
python分析网页上所有超链接的方法
2015/05/08 Python
Python在图片中添加文字的两种方法
2017/04/29 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
Python socket实现简单聊天室
2018/04/01 Python
PyCharm如何导入python项目的方法
2020/02/06 Python
解决python 找不到module的问题
2020/02/12 Python
Python为何不支持switch语句原理详解
2020/10/21 Python
Python通过Schema实现数据验证方式
2020/11/12 Python
Python从文件中读取数据的方法步骤
2020/11/18 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
TUMI马来西亚官方网站:国际领先的高品质商旅箱包品牌
2018/04/26 全球购物
武汉东之林科技有限公司机试
2013/09/17 面试题
爱情检讨书大全
2014/01/21 职场文书
咖啡厅商业计划书
2014/09/15 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
机关职员工作检讨书
2014/10/23 职场文书
我是特种兵观后感
2015/06/11 职场文书
教师节作文之小学四年级
2019/09/03 职场文书
导游词之上海东方明珠塔
2019/09/25 职场文书