修改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 相关文章推荐
JavaScript中的View-Model使用介绍
Aug 11 Javascript
javascript的数组和常用函数详解
May 09 Javascript
jQuery 实现自动填充邮箱功能(带下拉提示)
Oct 14 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
Jan 23 Javascript
JavaScript监听和禁用浏览器回车事件实例
Jan 31 Javascript
8 行 Node.js 代码实现代理服务器
Dec 05 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
Dec 26 Javascript
Angular2 组件通信的实例代码
Jun 23 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
Sep 20 Javascript
vuejs实现标签选项卡动态更改css样式的方法
May 31 Javascript
Vue中this.$nextTick的作用及用法
Feb 04 Javascript
js实现翻牌小游戏
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
PHP 图片上传实现代码 带详细注释
2010/04/29 PHP
PHP中仿制 ecshop验证码实例
2017/01/06 PHP
Jquery 1.42 checkbox 全选和反选代码
2010/03/27 Javascript
Javascript数组的排序 sort()方法和reverse()方法
2012/06/04 Javascript
js快速排序的实现代码
2013/12/08 Javascript
JS执行删除前的判断代码
2014/02/18 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
jquery中checkbox使用方法简单实例演示
2015/11/24 Javascript
理解Javascript图片预加载
2016/02/23 Javascript
JS留言功能的简单实现案例(推荐)
2016/06/23 Javascript
Vue.js学习记录之在元素与template中使用v-if指令实例
2017/06/27 Javascript
vue loadmore 组件滑动加载更多源码解析
2017/07/19 Javascript
js 计数排序的实现示例(升级版)
2020/01/12 Javascript
[01:08:00]Fnatic vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
python操作MySQL数据库具体方法
2013/10/28 Python
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
python字符串替换的2种方法
2014/11/30 Python
详解Python中__str__和__repr__方法的区别
2015/04/17 Python
详解使用python crontab设置linux定时任务
2016/12/08 Python
Python编程之序列操作实例详解
2017/07/22 Python
python学习教程之Numpy和Pandas的使用
2017/09/11 Python
详解Python做一个名片管理系统
2019/03/14 Python
详解Python列表赋值复制深拷贝及5种浅拷贝
2019/05/15 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
Pytorch在NLP中的简单应用详解
2020/01/08 Python
Django DRF路由与扩展功能的实现
2020/06/03 Python
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
挑战杯创业计划书的写作指南
2014/01/07 职场文书
司机检讨书
2014/02/13 职场文书
法制宣传标语
2014/06/23 职场文书
个人安全生产责任书
2014/07/28 职场文书
电力培训学习心得体会
2016/01/11 职场文书
使用pandas或numpy处理数据中的空值(np.isnan()/pd.isnull())
2021/05/14 Python
PHP设计模式(观察者模式)
2021/07/07 PHP