Jquery实现的可收缩、可拖拽控件

2015/01/10 31396
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Sortable - Portlets</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<style>
body {
min-width: 720px;
}
.column {
width: 280px;
float: left;
padding-bottom: 100px;
}
.portlet {
margin: 0 1em 1em 0;
padding: 0.3em;
}
.portlet-header {
padding: 0.2em 0.3em;
margin-bottom: 0.5em;
position: relative;
cursor:move;
}
.portlet-toggle {
position: absolute;
top: 50%;
right: 0;
margin-top: -8px;
}
.portlet-content {
padding: 0.4em;
word-wrap:break-word;
}
.portlet-placeholder {
border: 1px dotted black;
margin: 0 1em 1em 0;
height: 400px;
}
</style>
<script>
$(function() {
$( ".column" ).sortable({
	connectWith: ".column",
	handle: ".portlet-header",
	cancel: ".portlet-toggle",
	placeholder: "portlet-placeholder ui-corner-all"
});
$( ".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 portlet-toggle'></span>");
$( ".portlet-toggle" ).click(function() {
var icon = $( this );
	icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );
	icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();
});
});
</script>
</head>
<body>
<div id="maindiv">
	<div id="column1" class="column">
		<div class="portlet">
			<div class="portlet-header">
				<div>Michael Jordan</div>
			</div>
			<div class="portlet-content">
				<div>North Carolina,1984,No3,1.98,14years,carrer high:69</div>
			</div>
		</div>
		<div class="portlet">
			<div class="portlet-header">
				<div>Allen Iverson</div>
			</div>
			<div class="portlet-content">
				<div>Georgetown,1996,No1,1.83,15years,carrer high:60</div>
			</div>
		</div>
	</div>

	<div id="column2" class="column">
		<div class="portlet">
			<div class="portlet-header">Wins Cart</div>
			<div class="portlet-content">North Carolina,1998,No5,1.98,16years,carrer high:51</div>
		</div>
	</div>
	<div id="column3" class="column">
		<div class="portlet">
			<div class="portlet-header">Kevin Garnet</div>
			<div class="portlet-content">-,1995,No5,2.11,19years,carrer high:47</div>
		</div>
		<div class="portlet">
			<div class="portlet-header">Paul Pierce</div>
			<div class="portlet-content">Kansas,1998,No10,2.01,16years,carrer high:50</div>
		</div>
	</div>
	<div id="column4" class="column"></div>
</div>
</body>
</html>
代码片段
