jquery dialog解决用户将dialog拖出页面后,dialog就不能拖下来了,除非要重新打开页面...

思路如下:
使用panel的onOpen事件,取得diglog的原始left和top当用户在拖动dialog过程中,使用panel的onMove事件取得dialog所在父页面body的width和height,通过计算,当用户将diglog拖动出body时,使用panel的move函数将dialog移动到初始的位置。
示例Demo:
本示例定义一个函数,传入文件夹和图片名称通过dialog框显示图片.

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Open Dialog</title>
<link rel="stylesheet" href="jquery/themes/default/easyui.css" type="text/css" >
<link rel="stylesheet" href="jquery/themes/icon.css" type="text/css" >
<script type="text/javascript" src="jquery/jquery.easyui.min.js" charset="UTF-8"></script>
<script type="text/javascript" src="jquery/locale/easyui-lang-zh_CN.js" charset="UTF-8"></script>
<script type="text/javascript">
//本示例定义一个函数,传入文件夹和图片名称通过dialog框显示图片
function showImagePreview(fileName,imageName){
// 用于Linux下服务器显示图片
//var scheme = '<%=request.getScheme() %>';
//var serverName = '<%=request.getServerName() %>';
//var tempPath = scheme+"://"+serverName;
//var path = tempPath+"/images/upload/"+fileName+"/"+imageName;
//document.getElementById("showImage").src=path;
//用于window下服务器显示图片
var scheme = '<%=request.getScheme() %>';
var serverName = '<%=request.getServerName() %>';
var path = '<%=request.getContextPath() %>';
var serverPort = '<%=request.getServerPort() %>';
var tempPath = scheme+"://"+serverName+":"+serverPort+path;
var imagePath = tempPath+"/images/upload/"+imageName;
document.getElementById("showImage").src=imagePath;
$('#imagePreview').show();
//定义Dialog的原始left和top
var default_left;
var default_top;
$('#imagePreview').dialog({
modal: true,
onOpen:function(){
//dialog原始left
default_left=$('#imagePreview').panel('options').left;
//dialog原始top
default_top=$('#imagePreview').panel('options').top;
},
onMove:function(left,top){ //鼠标拖动时事件
var body_width=document.body.offsetWidth;//body的宽度
var body_height=document.body.offsetHeight;//body的高度
var dd_width= $('#imagePreview').panel('options').width;//dialog的宽度
var dd_height= $('#imagePreview').panel('options').height;//dialog的高度
if(left<1||left>(body_width-dd_width)||top<1||top>(body_height-dd_height)){
$('#imagePreview').dialog('move',{
left:default_left,
top:default_top
});
}
}
});
}
</script>
</head>
<body>
<div id="imagePreview" title="图片预览" style="display:none;padding:5px;width:800px;height:600px;" >
<img width='100%' height='100%' id="showImage" />
</div>
</body>
</html>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值