Sortable demo (portlets): Cleanup.

Author: scottgonzalez

demos/sortable/portlets.html

@@ -11,34 +11,58 @@
 	<script src="../../ui/jquery.ui.sortable.js"></script>
 	<link rel="stylesheet" href="../demos.css">
 	<style>
-	body { min-width: 520px; }
-	.column { width: 170px; float: left; padding-bottom: 100px; }
-	.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; }
-	.ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
-	.ui-sortable-placeholder * { visibility: hidden; }
+	body {
+		min-width: 520px;
+	}
+	.column {
+		width: 170px;
+		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;
+	}
+	.portlet-toggle {
+		position: absolute;
+		top: 50%;
+		right: 0;
+		margin-top: -8px;
+	}
+	.portlet-content {
+		padding: 0.4em;
+	}
+	.portlet-placeholder {
+		border: 1px dotted black;
+		margin: 0 1em 1em 0;
+		height: 50px;
+	}
 	</style>
 	<script>
 	$(function() {
 		$( ".column" ).sortable({
-			connectWith: ".column"
+			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" )
+		$( ".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" );
+				.prepend( "<span class='ui-icon ui-icon-minusthick portlet-toggle'></span>");
 
-		$( ".portlet-header .ui-icon" ).click(function() {
-			$( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
-			$( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
+		$( ".portlet-toggle" ).click(function() {
+			var icon = $( this );
+			icon.toggleClass( "ui-icon-minusthick ui-icon-plusthick" );
+			icon.closest( ".portlet" ).find( ".portlet-content" ).toggle();
 		});
-
-		$( ".column" ).disableSelection();
 	});
 	</script>
 </head>