Jquery JavaScript DHTML





  jQuery UI Sortable - Portlets
  
  
  
  
  
  
  .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; }
  
  
  $(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('')
        .end()
      .find(".portlet-content");
    $(".portlet-header .ui-icon").click(function() {
      $(this).toggleClass("ui-icon-minusthick");
      $(this).parents(".portlet:first").find(".portlet-content").toggle();
    });
    $(".column").disableSelection();
  });
  




  
    Feeds

    Lorem ipsum dolor sit amet, consectetuer adipiscing elit

  

  
  
    News
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit
  


  
    Shopping
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit
  


  
    Links
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit
  
  
  
    Images
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit
  




  Enable portlets (styled divs) as sortables and use the connectWith
  option to allow sorting between columns.