title: jQuery UI Sortable add class of dragged object to placeholder to determine size
body: <p>I'm using sortable to sort different width x height divs and masonry to clean up the empty spaces.  How can I pass the class of the div being sorted to the placeholder so they are the same size?</p>
  <p>The boxes have the classes single-single, double-single, etc... to determine the size.</p>
  <h3>Example: <a href="http://jsfiddle.net/c3mdigital/fTBbc/17/" rel="nofollow noreferrer">http://jsfiddle.net/c3mdigital/fTBbc/17/</a></h3>
  <p>The problem is the classes are not being passed.  Sortable adds the class when it doesn't recognize the placeholder option but it sets visibility to hidden.</p>
  <h3>code:</h3>
  <pre><code>//The extra ajax stuff is to save the sort order to WordPress menu order.
  $(document).ready(function() {
  $('#edit').click(function() {
  
      var itemList = $('.sortable');
  
      itemList.sortable({
          
          start: function(event, ui) {
              
              var plus = ui.item.hasClass('double-single') ? 'double-single' : 'single-single';
              var placeholder = 
              itemList.sortable(&quot;option&quot;, &quot;placeholder&quot;, 'placeholder ' + plus );
              
          },
                  update: function(event, ui) {
                      $('#loading-animation').show(); // Show the animate loading gif while waiting
                      opts = {
                          url: MyAjax.ajaxurl,
                          // ajaxurl is defined by WordPress and points to /wp-admin/admin-ajax.php
                          type: 'POST',
                          async: true,
                          cache: false,
                          dataType: 'json',
                          data: {
                              action: 'item_sort',
                              // Tell WordPress how to handle this ajax request
                              order: itemList.sortable('toArray').toString() // Passes ID's of list items in  1,3,2 format
                          },
                          success: function(response) {
                              $('#loading-animation').hide(); // Hide the loading animation
                              return;
                          },
                          error: function(xhr, textStatus, e) { // This can be expanded to provide more information
                              alert(e);
                              // alert('There was an error saving the updates');
                              $('#loading-animation').hide(); // Hide the loading animation
                              return;
                          }
                      };
                      $.ajax(opts);
                  }
                });
        
    
          });
   
      $('.sortable').disableSelection();
  });
      
  $(function() {
      $('#sort').click(function() {
          $('#sortable1').masonry({
              columnWidth: 325,
              itemSelector: '.ui-state-default'
          });
      });
  });
  </code></pre>