修改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 文件的同步加载与异步加载实现原理
Dec 13 Javascript
jQuery基础语法实例入门
Dec 23 Javascript
JS实现网页上随机产生超链接地址的方法
Nov 09 Javascript
深入剖析javascript中的exec与match方法
May 18 Javascript
浅谈js原生拖放
Nov 21 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 Javascript
基于node.js之调试器详解
Aug 22 Javascript
bootstrap可编辑下拉框jquery.editable-select
Oct 12 jQuery
使用Vue动态生成form表单的实例代码
Apr 26 Javascript
微信小程序实现定位及到指定位置导航的示例代码
Aug 20 Javascript
0基础学习前端开发的一些建议
Jul 14 Javascript
react ant Design手动设置表单的值操作
Oct 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
域名查询代码公布
2006/10/09 PHP
php dirname(__FILE__) 获取当前文件的绝对路径
2011/06/28 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
php解析xml方法实例详解
2015/05/12 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
PHP安装threads多线程扩展基础教程
2015/11/17 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
原生JS实现Ajax通过GET方式与PHP进行交互操作示例
2018/05/12 PHP
WordPress免插件实现面包屑导航的示例代码
2020/08/20 PHP
用于table内容排序
2006/07/21 Javascript
javascript eval函数深入认识
2009/02/21 Javascript
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
js导航菜单(自写)简单大方
2013/03/28 Javascript
JS实现仿Windows经典风格的选项卡Tab切换代码
2015/10/20 Javascript
Vue.js每天必学之数据双向绑定
2016/09/05 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
浅谈webpack编译vue项目生成的代码探索
2017/12/11 Javascript
layui table 列宽百分比显示的实现方法
2019/09/28 Javascript
vue实现简单学生信息管理
2020/05/30 Javascript
原生js生成图片验证码
2020/10/11 Javascript
python网页请求urllib2模块简单封装代码
2014/02/07 Python
python生成随机图形验证码详解
2017/11/08 Python
Python 16进制与中文相互转换的实现方法
2018/07/09 Python
python实现转圈打印矩阵
2019/03/02 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
Python代码需要缩进吗
2020/07/01 Python
Python3使用tesserocr识别字母数字验证码的实现
2021/01/29 Python
整理HTML5移动端开发的常用触摸事件
2016/04/15 HTML / CSS
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
Wiggle新西兰:自行车、跑步、游泳
2020/05/06 全球购物
工程建设实施方案
2014/03/14 职场文书
《祁黄羊》教学反思
2014/04/22 职场文书
大学生创业计划书怎么写
2014/09/15 职场文书
一个独生女的故事观后感
2015/06/04 职场文书
新生儿未入户证明
2015/06/23 职场文书