JQuery UI-Sortable-Portlets

Reorder elements in a list or grid using the mouse.

by ksoncan34

HTML

<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<div class="column">
  <div class="portlet">
    <div class="portlet-header">Feeds</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>
  <div class="portlet">
    <div class="portlet-header">News</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>
<!-- </div>
<div class="column"> -->
  <div class="portlet portletWide">
    <div class="portlet-header">Shopping</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>
<!-- </div>
<div class="column"> -->
  <div class="portlet">
    <div class="portlet-header">Links</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.  Mauris elementum eu lorem eget dictum. Donec sagittis felis odio, faucibus consequat felis congue nec. Phasellus porta mauris nec lorem congue suscipit.</div>
  </div>
  <div class="portlet">
    <div class="portlet-header">Images</div>
    <div class="portlet-content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
  </div>
</div>

CSS

body {
   min-width: 520px;
 }
 
 /* .column {
   
   float: left;
   padding-bottom: 100px;
 }
  */
 .portlet {
   margin: 0 1em 1em 0;
   padding: 0.3em;
   width: 170px;
   float: left;
   height: 150px;
 }
 
 .portletWide {
   width: 340px;
   
 }
 
 .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;
   float: left;
 }

JavaScript

$(function() {
   $(".column").sortable({
     connectWith: ".column",
     handle: ".portlet-header",
     cancel: ".portlet-toggle",
     placeholder: "portlet-placeholder ui-corner-all", 
     start: function(e, ui){
        ui.placeholder.height(ui.item.height());
        ui.placeholder.width(ui.item.width());        
    }
     
   });
   $(".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();
   });
 });