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

sunnylinner

2013-11-26

思路如下：

使用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>

dialog jquery事件 jquery