修改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 相关文章推荐
利用json获取字符出现次数的代码
Mar 22 Javascript
Jquery实现图片放大镜效果的思路及代码(自写)
Oct 18 Javascript
javascript实现图片自动和可控的轮播切换特效
Apr 13 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
Aug 14 Javascript
jQuery实现的文字hover颜色渐变效果实例
Feb 20 Javascript
深入剖析JavaScript面向对象编程
Jul 12 Javascript
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
Vue 按键修饰符处理事件的方法
May 04 Javascript
layui使用数据表格实现购物车功能
Jul 26 Javascript
js blob类型url的视频下载问题的解决
Nov 29 Javascript
node创建Vue项目步骤详解
Mar 06 Javascript
Element-UI 使用el-row 分栏布局的教程
Oct 26 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利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
一个php短网址的生成代码(仿微博短网址)
2014/05/07 PHP
Zend Framework实现多服务器共享SESSION数据的方法
2016/03/22 PHP
源码分析 Laravel 重复执行同一个队列任务的原因
2017/12/25 PHP
确保Laravel网站不会被嵌入到其他站点中的方法
2019/10/18 PHP
php实现简易计算器
2020/08/28 PHP
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
jQuery Tools tab(幻灯片)
2012/07/14 Javascript
jQuery获得document和window对象宽度和高度的方法
2015/03/25 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
2016/06/21 Javascript
jQuery插件学习教程之SlidesJs轮播+Validation验证
2016/07/12 Javascript
详解开发react应用最好用的脚手架 create-react-app
2018/04/24 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
小程序自定义弹框效果
2020/11/16 Javascript
进一步了解Python中的XML 工具
2015/04/13 Python
Python中使用bidict模块双向字典结构的奇技淫巧
2016/07/12 Python
基于python实现学生管理系统
2018/10/17 Python
Python中文编码知识点
2019/02/18 Python
使用Python的OpenCV模块识别滑动验证码的缺口(推荐)
2019/05/10 Python
Python图像处理库PIL中图像格式转换的实现
2020/02/26 Python
Python爬虫实现模拟点击动态页面
2020/03/05 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
使用Python matplotlib作图时,设置横纵坐标轴数值以百分比(%)显示
2020/05/16 Python
基于pandas向csv添加新的行和列
2020/05/25 Python
OpenCV图片漫画效果的实现示例
2020/08/18 Python
澳大利亚便宜隐形眼镜购买网站:QUICKLENS Australia
2018/10/06 全球购物
美国医生配方营养补充剂供应商:Healthy Directions
2019/07/10 全球购物
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
爱护公共设施倡议书
2014/08/29 职场文书
领导班子对照检查材料
2014/09/22 职场文书
个人遵守党的政治纪律情况对照检查材料思想汇报
2014/09/25 职场文书
2014年手术室工作总结
2014/11/26 职场文书
信息技术研修心得体会
2016/01/08 职场文书
2016幼儿教师自荐信范文
2016/01/28 职场文书
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python