jquery 拖动问题

xinren369 2013-02-11 11:44:57

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv=\"refresh\" content="1">
<title>无标题文档</title>
</head>
<body>
<style type="text/css">
.contain{ width:800px; border:1px solid #f00; margin:auto; padding:2px; position:relative}
.one,.two,.three{ width:100px; height:60px; border:1px solid #ccc;cursor:move; margin:10px;}
.main{ border:1px solid #369; position:relative;}
.top{ height:20px; border:1px solid #00F; position:relative}
.bottom{ height:30px; border:1px solid #00F; position:relative}
</style>
<SCRIPT LANGUAGE="JavaScript" src="js/jquery.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript" src="js/jquery-ui-1.8.18.custom.min.js"></SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
var obh,startTop;
var top=0;
var arr=[];
$(function(){
$(".main").children().draggable({
start:function(e){
$(".main").children().each(function(i,n){
startTop=$(this).position().top;
});
},
drag:function(e){
//调整高度开始
$(".main").children().each(function(i,n){
var obt=$(this).position().top;
arr[i]=obt;
});
$(".main").children().each(function(i,n){
obh=$(this).outerHeight(true);
top=getMax(arr);
});
$(".main").innerHeight(top+obh+"px");
//调整高度结束

},
stop:function(e){
}
,containment:'parent'//加这一句后main不会自动增高，有什么办法解决吗？
});
});
function getMax(arr){
var maxV=arr[0];
$.each(arr,function(i,n){
if(n>maxV){
maxV=n;
}
});
return maxV;
}
</SCRIPT>
</body>
<div class="contain">
<div class="top">top</div>
<div class="main">
<div class="one">one</div>
<div class="two">two</div>
<div class="three">three</div>
</div>
<div class="bottom">bottom</div>
</div>
</html>

...全文