修改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数组的使用
Mar 28 Javascript
JS实现倒计时和文字滚动的效果实例
Oct 29 Javascript
Javascript检查图片大小不要让大图片撑破页面
Nov 04 Javascript
jQuery trigger()方法用法介绍
Jan 13 Javascript
AngularJS中处理多个promise的方式
Feb 02 Javascript
js ajaxfileupload.js上传报错的解决方法
May 05 Javascript
js简单时间比较的方法
Aug 02 Javascript
微信小程序 实例应用(记账)详解
Sep 28 Javascript
微信小程序Server端环境配置详解(SSL, Nginx HTTPS,TLS 1.2 升级)
Jan 12 Javascript
JS中的算法与数据结构之列表(List)实例详解
Aug 16 Javascript
vue v-for直接循环数字实例
Nov 07 Javascript
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 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与SQL注入攻击[一]
2007/04/17 PHP
phpstorm编辑器乱码问题解决
2014/12/01 PHP
php查询ip所在地的方法
2014/12/05 PHP
php动态添加url查询参数的方法
2015/04/14 PHP
简单谈谈PHP中的trait
2017/02/25 PHP
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
2010/03/09 Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
2011/04/16 Javascript
使用jQuery实现图片遮罩半透明坠落遮挡
2015/03/16 Javascript
javascript实现仿腾讯游戏选择
2015/05/14 Javascript
JavaScript中使用concat()方法拼接字符串的教程
2015/06/06 Javascript
javascript使用 concat 方法对数组进行合并的方法
2016/09/08 Javascript
详解vuejs几种不同组件(页面)间传值的方式
2017/06/01 Javascript
Vue中控制v-for循环次数的实现方法
2018/09/26 Javascript
vue实现登录拦截
2020/06/29 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
[02:02]DOTA2英雄基础教程 斯拉达
2013/12/11 DOTA
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
在RedHat系Linux上部署Python的Celery框架的教程
2015/04/07 Python
Python使用bs4获取58同城城市分类的方法
2015/07/08 Python
Python之自动获取公网IP的实例讲解
2017/10/01 Python
Python 控制终端输出文字的实例
2019/07/12 Python
Django app配置多个数据库代码实例
2019/12/17 Python
HTML5 Canvas中绘制椭圆的4种方法
2015/04/24 HTML / CSS
英国最大的自有市场,比亚马逊便宜:Flubit
2019/03/19 全球购物
Whistles官网:英国女装品牌
2020/08/14 全球购物
法学专业毕业生自荐信范文
2013/12/18 职场文书
企业出纳岗位职责
2014/03/12 职场文书
《社戏》教学反思
2014/04/15 职场文书
五一劳动节演讲稿
2014/09/12 职场文书
党支部三会一课计划
2014/09/24 职场文书
2016年国培心得体会及反思
2016/01/13 职场文书
详解解Django 多对多表关系的三种创建方式
2021/08/23 Python
Windows环境下实现批量执行Sql文件
2021/10/05 SQL Server
div与span之间的区别与使用介绍
2021/12/06 HTML / CSS