jQuery EasyUI Dialog拖不下来如何解决

使用jquery easyui可以很容易的创建很炫的前台页面，最近在使用过程中发现dialog存在一个问题：

用户将dialog拖出页面后，dialog就不能拖下来了，除非要重新打开页面，这个问题对于用户体验来说是非常重要的，

所以就开始研究easyu API看看有没有相应的函数或者事件去处理，结果发现没有现成，只好自己想了个办法：

思路如下：

使用panel的onOpen事件，取得diglog的原始left和top

当用户在拖动dialog过程中，使用panel的onMove事件取得dialog所在父页面body的width和height，

通过计算，当用户将diglog拖动出body时，使用panel的move函数将dialog移动到初始的位置。

经过测试次方法可行，代码如下所示：

var default_left;
var default_top;
$('#details_dd').dialog({
  title:'详细信息',
  modal: true,
  onOpen:function(){
  //dialog原始left
  default_left=$('#details_dd').panel('options').left;
     //dialog原始top
   default_top=$('#details_dd').panel('options').top;
},
  onMove:function(left,top){ //鼠标拖动时事件
   var body_width=document.body.offsetWidth;//body的宽度
   var body_height=document.body.offsetHeight;//body的高度
   var dd_width= $('#details_dd').panel('options').width;//dialog的宽度
   var dd_height= $('#details_dd').panel('options').height;//dialog的高度
   if(left<1||left>(body_width-dd_width)||top<1||top>(body_height-dd_height)){
      $('#details_dd').dialog('move',{
   left:default_left,
   top:default_top
   });
    }
}
});

有些问题就需要大家一起讨论研究才会有所收获，本文分享的jQuery EasyUI Dialog拖不下来的解决办法，希望可以对大家的学习有所帮助，帮助大家顺利解决jQuery EasyUI Dialog拖不下来的问题。

赞 (0)

相关推荐

  • 浅析JQuery UI Dialog的样式设置问题

    最近在用一个JQUERY UI Dialog的插件,感觉特别强大,但样式设置比较麻烦,研究了俩天终于搞定了. 运行插件,需要的环境如下 <script src="../../JS/jquery-1.4.2.js" type="text/javascript"></script> <script src="../JS/jquery.ui.js" type="text/javascript">&

  • jQuery实现dialog设置focus焦点的方法

    本文实例讲述了jQuery实现dialog设置focus焦点的方法.分享给大家供大家参考.具体分析如下: 当弹出对话框,默认我们应该将焦点定位到输入的文本框,但是在dialog.show()之前写上$("#txtGroupName").focus();无法生效. 查看jQuery的官方文档后,发现dialog提供了一个focus的参数,ok,试试先~~ //显示新建项目群组对话框 function showCreateProjectGroupDialog(i) { $("#l

  • jQuery Dialog 取消右上角删除按钮事件

    废话不多说了,直接给大家贴jquery dialog取消右上角删除按钮的代码了. 具体代码如下所示: $("#div1").dialog({ closeOnEscape:false, open:function(event,ui){$(".ui-dialog-titlebar-close").hide();} }); 以上所述是小编给大家介绍的jquery dialog 取消右上角删除按钮事件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.

  • 分享2个jQuery插件--jquery.fileupload与artdialog

    分享2个jQuery插件--jquery.fileupload与artdialog

    这些是我们项目中必不可少的东西,所以今天推荐两个一个叫做artdialog是个iframe的jquery插件,一个叫jquery file upload,我看网上很少有这个插件jquery file upload的插件使用教程,今天我就简单的介绍和写一点使用的方法! 简单用代码举例子 最小化的方法 复制代码 代码如下: data-url是上传后执行上传文件的php方法 <input id="fileupload" type="file" name="

  • jQuery前端框架easyui使用Dialog时bug处理

    jQuery前端框架easyui使用Dialog时bug处理

    最近一直都在用easyui前端框架来开发设计UI,但在使用Dialog时,发现如果页面内容比较多,就会出现问题,首先看一下我的原代码: 复制代码 代码如下: <input type="button" value="确认预约" id="btnconfirm" onclick="javascript:openconfirmDlg();" />     <div id="confirmd">

  • JQUERY dialog的用法详细解析

    今天用到了客户端的对话框,把 jQuery UI 中的对话框学习了一下. 准备 jQuery 环境 首先,我们创建一个按钮,点击这个按钮的时候,将会弹出一个对话框. <input type="button" value="删除" id="btn" /> 为了设置这个按钮点击的事件,需要准备 jQuery 的环境. <script type="text/javascript" src="scripts

  • jquery showModelDialog的使用方法示例详解

    jquery showModelDialog的使用方法示例详解

    前两天接到这样一个任务:在用户上传附件,需要校验用户上传附件中身份证信息,如果存在错误信息需要将所有的错误信息展示出来.这个需求我一开始考虑得就是使用jQuery Dialog.但是看到这个项目没有使用而是使用showModelDialog,所以为了统一,也需要使用showModelDialog. window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框,由于是对话框,因此它并没有一般用window.open()打开的窗口的所有属性.使用方法:varretur

  • jQuery EasyUI Dialog拖不下来如何解决

    使用jquery easyui可以很容易的创建很炫的前台页面,最近在使用过程中发现dialog存在一个问题: 用户将dialog拖出页面后,dialog就不能拖下来了,除非要重新打开页面,这个问题对于用户体验来说是非常重要的, 所以就开始研究easyu API看看有没有相应的函数或者事件去处理,结果发现没有现成,只好自己想了个办法: 思路如下: 使用panel的onOpen事件,取得diglog的原始left和top 当用户在拖动dialog过程中,使用panel的onMove事件取得dialo

  • jquery ui dialog ie8出现滚动条的解决方法

    此问题在UI1.7就出现,到了UI1.8也未修复,真不知道该怎么说好.. JQUI 开发提交BUG的帖子:http://dev.jqueryui.com/ticket/3623 解决办法相当不科学~ 我的解决办法,个人感觉好过那个,因为我只隐藏横的滚动条,呵呵 附上修改的代码: 修改:jquery.ui.dialog.js 复制代码 代码如下: var $el = (this.oldInstances.pop() || $('<div></div>').addClass('ui-w

  • jQuery EasyUI tree 使用拖拽时遇到的错误小结

    jQuery EasyUI tree 使用拖拽时遇到的错误小结

    在我使用tree拖拽时总是失败,控制台输出了很多错误. 经过跟踪分析发现这是一个由于特殊配置导致的错误. 原先错误的代码如下: $('#tree').tree({ //省略其他 loadFilter: function(data, parent){ return data.rows; } }); 由于我后台返回值并不是一个直接适合tree使用的数据,需要从中取出rows才可以,所以就有了这段代码. 而 EasyUI 出错的原因就在于当拖动时,拖动方法中仍然会调用loadFilter方法,如下图代

  • 如何解决jQuery EasyUI 已打开Tab重新加载问题

    先给大家说下我的需求,如下: 点击左侧已经打开的tab可以刷新重新加载datagrid. 也就是说解决easyui 左侧tab重新刷新加载问题实现. 实现如下: function addTab(subtitle, url) { if (!$('#tabs').tabs('exists', subtitle)) { $('#tabs').tabs('add', { title : subtitle, content :<span style="font-family: Arial, Helv

  • jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法

    jQuery Easyui使用（二）之可折叠面板动态加载无效果的解决方法

    在上篇文章给大家介绍了jQuery Easyui使用(一)之可折叠面板的布局手风琴菜单 先上代码: <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title&g

  • jQuery Dialog 打开时自动聚焦的解决方法(两种方法)

    下面给大家介绍两种方法解决jQuery Dialog 打开时自动聚焦问题.具体实现方法大家可以参考下本文. 方法一: p1_dialog_seniorSearch.dialog({ title:"高级查询", autoOpen:false,//默认关闭 modal: true,//开启遮罩层 width:570, height:330, buttons: { "查询":function(){ seniorSearch(1,20) } , "关闭"

  • 在UpdatePanel内jquery easyui效果失效的解决方法

    在UpdatePanel内jquery easyui效果失效的解决方法

    使用easyui 的好处除了界面还不错之外,也因为使用方便. 复制代码 代码如下: <div class="easyui-tabs" style="width: 300px"> <div title="搜索"> ...</div> <div title="选择">...</div> <div title="返回">...</div

  • 关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法

    关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法

    书写jQuery EasyUI Tab 样例时,如果刷新前面的Tab 选项卡,某一个Tab 选项卡里面的页面布局变乱.如下面图片所示: 刚开始打开时页面布局正确: 此时我们在第二个选项卡里面,点击第一个页面的刷新按钮,一直刷新,然后切换回来再看看页面,如下图: 但是首页选项卡的页面是正常的. 为了便于解释说明,这里用第一个选项卡代表 "首页",第二个选项卡代表"子菜单10" 出现这种情况的问题根本原因在于,你在第二个选项卡里面,点击其它第一个选项卡刷新按钮时,其实刷

  • 在easyUI开发中，出现jquery.easyui.min.js函数库问题的解决办法

    在easyUI开发中，出现jquery.easyui.min.js函数库问题的解决办法

    easyUI是jquery的一个插件,是民间的插件.easyUI使用起来很方便,里面有网页制作的最重要的三大方块:javascript代码.html代码和Css样式.我们在导入easyUI库后,可以直接复制粘贴里面的代码,从而简单轻便地初步设置网页. 首先导入easyUI函数库: <link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">

  • jQuery UI Dialog控件中的表单无法正常提交的解决方法

    最近使用jQuery UI的Dialog控件时发现如果在此控件放置表单,则所有表单均无法正常提交,具体表现为: 1.提交按钮失效,点击后无任何反应. 2.即便是使用其它手段使页面产生提交,服务器端也无法取到Dialog中的表单数据. 研究了页面源码后发现,jQuery UI Dialog控件初始化时动态生成的HTML元素被添加到页面的尾部.form元素的后面,而原始的Dialog模板部分(其内包含表单元素)也被移到了 动态生成的HTML元素内.也就是说,原先在form内的表单在Dialog初始化

随机推荐