third-party/jquery-ui-1.10.2/demos/sortable/portlets.html

   1 <!doctype html>
   2 <html lang="en">
   3 <head>
   4         <meta charset="utf-8">
   5         <title>jQuery UI Sortable - Portlets</title>
   6         <link rel="stylesheet" href="../../themes/base/jquery.ui.all.css">
   7         <script src="../../jquery-1.9.1.js"></script>
   8         <script src="../../ui/jquery.ui.core.js"></script>
   9         <script src="../../ui/jquery.ui.widget.js"></script>
  10         <script src="../../ui/jquery.ui.mouse.js"></script>
  11         <script src="../../ui/jquery.ui.sortable.js"></script>
  12         <link rel="stylesheet" href="../demos.css">
  13         <style>
  14         body { min-width: 520px; }
  15         .column { width: 170px; float: left; padding-bottom: 100px; }
  16         .portlet { margin: 0 1em 1em 0; }
  17         .portlet-header { margin: 0.3em; padding-bottom: 4px; padding-left: 0.2em; }
  18         .portlet-header .ui-icon { float: right; }
  19         .portlet-content { padding: 0.4em; }
  20         .ui-sortable-placeholder { border: 1px dotted black; visibility: visible !important; height: 50px !important; }
  21         .ui-sortable-placeholder * { visibility: hidden; }
  22         </style>
  23         <script>
  24         $(function() {
  25                 $( ".column" ).sortable({
  26                         connectWith: ".column"
  27                 });
  28
  29                 $( ".portlet" ).addClass( "ui-widget ui-widget-content ui-helper-clearfix ui-corner-all" )
  30                         .find( ".portlet-header" )
  31                                 .addClass( "ui-widget-header ui-corner-all" )
  32                                 .prepend( "<span class='ui-icon ui-icon-minusthick'></span>")
  33                                 .end()
  34                         .find( ".portlet-content" );
  35
  36                 $( ".portlet-header .ui-icon" ).click(function() {
  37                         $( this ).toggleClass( "ui-icon-minusthick" ).toggleClass( "ui-icon-plusthick" );
  38                         $( this ).parents( ".portlet:first" ).find( ".portlet-content" ).toggle();
  39                 });
  40
  41                 $( ".column" ).disableSelection();
  42         });
  43         </script>
  44 </head>
  45 <body>
  46
  47 <div class="column">
  48
  49         <div class="portlet">
  50                 <div class="portlet-header">Feeds</div>
  51                 <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  52         </div>
  53
  54         <div class="portlet">
  55                 <div class="portlet-header">News</div>
  56                 <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  57         </div>
  58
  59 </div>
  60
  61 <div class="column">
  62
  63         <div class="portlet">
  64                 <div class="portlet-header">Shopping</div>
  65                 <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  66         </div>
  67
  68 </div>
  69
  70 <div class="column">
  71
  72         <div class="portlet">
  73                 <div class="portlet-header">Links</div>
  74                 <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  75         </div>
  76
  77         <div class="portlet">
  78                 <div class="portlet-header">Images</div>
  79                 <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  80         </div>
  81
  82 </div>
  83
  84 <div class="demo-description">
  85 <p>
  86         Enable portlets (styled divs) as sortables and use the <code>connectWith</code>
  87         option to allow sorting between columns.
  88 </p>
  89 </div>
  90 </body>
  91 </html>