<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript"
src="jquery.jdragndrop.js"></script>
<script type="text/javascript"
src="jquery.resizable.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#UserList").Drags({
zIndex: 20,
opacity: .7,
handle: '#ul_top',
containment: '#divbody',
callback: {
onMove: function(e) {
$('#droptracer').html('Div Position:(Left:'
+ e.pageX + ' ,Top:' + e.pageY + ')');
var p = $("#UserList");
var position = p.position();
if(position.left<=0){$("#UserList").css("left", "0px"); }
if(position.left +$("#UserList").innerWidth() >=$("#divbody").innerWidth()){$("#UserList").css("left",$("#divbody").innerWidth() -$("#UserList").innerWidth() +"px") ; }
if(position.top<=0){$("#UserList").css("top", "0px"); }
if(position.top +$("#UserList").innerHeight()>=$("#divbody").innerHeight()){$("#UserList").css("top",$("#divbody").innerHeight() -$("#UserList").innerHeight()+"px") ; }
},
onDrop: function() {
}
}
});
$("#UserList").resizable({
handler: '.handler',
min: { width: 21, height: 21 },
//max: { width: 600, height: 600 },
containment: '#divbody',
onResize: function(e) {
var p = $("#UserList");
var position = p.position();
if(position.left+$("#UserList").innerWidth()>=$("#divbody").innerWidth()){$("#UserList").css("width", $("#divbody").innerWidth()-position.left-4 +"px") ; }
if(position.top+$("#UserList").innerHeight()>=$("#divbody").innerHeight()){$("#UserList").css("height", $("#divbody").innerHeight()-position.top-4 +"px") ; }
},
onStop: function(e) {
}
});
})
</script>
<style type="text/css">
body
{
font-size:12px;
font-family:Calibri;
}
#UserList
{
background-color:#EEFAFF;
border:1px solid #BBE1F1;
padding:1px;
width:200px;
height:70px;
position:absolute;
left:0px;
top:0px;
}
#ul_top
{
background-color:#FFFFF7;
border:1px solid #FFCC00;
padding:5px;
cursor:move;
font-weight:bold;
}
.handler {
width: 20px;
height: 20px;
border-right: solid 1px #888;
border-bottom: solid 1px #888;
position: absolute;
right: 1px;
bottom: 1px;
cursor: nw-resize;
}
</style>
</head>
<body>
<div style=" position:absolute; width:900px ; height:900px; border:1px #666666 solid; top:10px; left:150px;" id="divbody">
<div id="UserList">
<div id="ul_top">
Drag Handle
</div>
Drag Me
<div class='handler'></div>
</div>
</div>
<div style="width:100px; height:100px ; border:1px #666666 solid;" id="droptracer" ></div>
</body>
</html>
