title: Displaying a placeholder when using jQuery UI sortable div
body: <p>I have declared a sortable list of items with jQuery UI in a bootstrap page. </p>
  
  <pre><code>$("#ReportContainer").sortable({
    helper: 'clone',
    revert: 'invalid',
  });
  </code></pre>
  
  <p>Each draggable element is a column e.g. col-md-12 down to col-md-4. When I drag an element I want the placeholder to retain the col-md-x of the element I am dragging. If I set a placehollder css I have to default it to one size between 12 and 4. By Default jQuery just adds the .ui-sortable-placeholder to the classes already there which would do what I want apart from that it also adds a style="display: none" which means I can't see my placeholder.</p>
  
  <p>Currently the placeholder looks like this</p>
  
  <pre><code> &lt;div class="col-md-x ui-sortable-placeholder" style="display: none"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>If I set a placeholder it will throw away all col-md-x classes and just use that. e.g.</p>
  
  <pre><code>&lt;div class="myPlaceholder"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>Does anyone have a work around for this?</p>