修改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 相关文章推荐
二级域名或跨域共享Cookies的实现方法
Aug 07 Javascript
jquery $.ajax各个事件执行顺序
Oct 15 Javascript
JavaScript 注册事件代码
Jan 27 Javascript
AngularJS基础 ng-init 指令简单示例
Aug 02 Javascript
jQuery元素属性操作实例(设置、获取及删除元素属性)
Sep 08 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
跨域请求两种方法 jsonp和cors的实现
Nov 11 Javascript
如何自定义微信小程序tabbar上边框的颜色
Jul 09 Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
js实现缓动动画
Nov 25 Javascript
Vue 简单实现前端权限控制的示例
Dec 25 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 zend 相对路径问题
2009/01/12 PHP
php 字符串函数收集
2010/03/29 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
基于JQuery.timer插件实现一个计时器
2010/04/25 Javascript
jquery实现metro效果示例代码
2013/09/06 Javascript
使用 Node.js 做 Function Test实现方法
2013/10/25 Javascript
JavaScript中实现继承的三种方式和实例
2015/01/29 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
nodejs中向HTTP响应传送进程的输出
2017/03/19 NodeJs
Node.js 异步异常的处理与domain模块解析
2017/05/10 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
Async Validator 异步验证使用说明
2017/07/03 Javascript
JavaScript中in和hasOwnProperty区别详解
2017/08/04 Javascript
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
vue过滤器用法实例分析
2019/03/15 Javascript
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
基于jquery实现彩色投票进度条代码解析
2020/08/26 jQuery
javascript实现数字时钟效果
2021/02/06 Javascript
用Python登录Gmail并发送Gmail邮件的教程
2015/04/17 Python
关于Python中Inf与Nan的判断问题详解
2017/02/08 Python
PyQt5实现简易计算器
2020/05/30 Python
python中如何设置代码自动提示
2020/07/15 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
python 实现控制鼠标键盘
2020/11/27 Python
用 Django 开发一个 Python Web API的方法步骤
2020/12/03 Python
使用css3绘制出各种几何图形
2016/08/17 HTML / CSS
爱尔兰灯和灯具网上商店:Lights.ie
2018/03/26 全球购物
利用异或运算实现两个无符号数的加法运算
2013/12/20 面试题
什么是Assembly(程序集)
2014/09/14 面试题
毕业生个人的求职信范文
2013/12/03 职场文书
青年安全生产示范岗事迹材料
2014/05/04 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
心灵点滴观后感
2015/06/02 职场文书
vue使用v-model进行跨组件绑定的基本实现方法
2021/04/28 Vue.js
原生Js 实现的简单无缝滚动轮播图的示例代码
2021/05/10 Javascript
pytorch 如何使用batch训练lstm网络
2021/05/28 Python