jquery ui 可排序窗口 portlet

需要的文件

<link type="text/css" rel="stylesheet" href="css/jquery-ui-1.8.14.custom.css" />
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.14.custom.min.js"></script>

自定义样式

<style>
	.column { width: 250px; float: left;}
	.portlet { margin: 0 1em 1em 0; }
	.portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
	.portlet-header .ui-icon { float: right; }
	.portlet-content { padding: 0.4em; }
	.portlet-content ul {list-style-type: none; margin: 0; padding: 0; width: 100%;}
	.portlet-content ul li{margin: 2px 0 3px; border:  1px solid transparent;}
	.portlet-content ul li a{display: block;font-weight: bold;}
	.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
	.ui-sortable-placeholder * { visibility: hidden; }
	</style>
	<script>

javascript 声明

<script>
	$(function() {
		$( ".column" ).sortable({
			connectWith: ".column"
		});

		$( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
			.find( ".portlet-header" )
				.addClass( "ui-widget-header ui-corner-all" )
				.prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
				.end()
			.find( ".portlet-content" );

		$( ".portlet-header .ui-icon" ).click(function() {
			$( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
			$( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
		});

		//加入鼠标移上去高亮效果
		$('.portlet-content').find("li").live('mouseover mouseout', function (event) {
            if (event.type == 'mouseover') {
                $(this).addClass("ui-state-hover");
            } else {
                $(this).removeClass("ui-state-hover");
            }
        });

	});
	</script>

html格式，一个column的div下竖着先排列portlet的div，每一个为一个小窗体。portlet-header的div为标题栏，portlet-content的div为窗口内容，这里我用来显示一些竖排列的链接

<div class="column">

	<div class="portlet">
		<div class="portlet-header">互联网资源</div>
		<div class="portlet-content">
			<ul>
				<li><a href="#">Google</a></li>
				<li><a href="#">Baidu</a></li>
			</ul>
		</div>
	</div>
	
	<div class="portlet">
		<div class="portlet-header">互联网资源</div>
		<div class="portlet-content">
			<ul>
				<li><a href="#">Google</a></li>
				<li><a href="#">Baidu</a></li>
			</ul>
		</div>
	</div>
	
</div>

<div class="column">

	<div class="portlet">
		<div class="portlet-header">互联网资源</div>
		<div class="portlet-content">
			<ul>
				<li><a href="#">Google</a></li>
				<li><a href="#">Baidu</a></li>
</li>
			</ul>
		</div>
	</div>
	
	<div class="portlet">
		<div class="portlet-header">互联网资源</div>
		<div class="portlet-content">
			<ul>
				<li><a href="#">Google</a></li>
				<li><a href="#">Baidu</a></li>
</li>
			</ul>
		</div>
	</div>
</div>