Sortable demo (portlets): Cleanup.

(cherry picked from commit 2121a1008a91c03c1e28262dcf3edc9bd8e83a20)

diff --git a/demos/sortable/portlets.html b/demos/sortable/portlets.html
index 5a3f2b662a2ba3389d8a2cca7a8ae96ef078a955..a9f7c1eead187f79a7c0738681b69ecbe546790c 100644 (file)
--- a/demos/sortable/portlets.html
+++ b/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>