title: Applying Shadow When Dragged via Jquery UI Sortable
body: <p>I would like to add a "shadow" for the element that I drag using jQuery UI Sortable. This shadow essentially is over the area of <em>where the element would be</em> if the user dropped the element (not the currently dragged element itself). Trello implements this feature when users drag lists.</p>
  
  <p>Does anyone know how this might be approached? I can see that we can access the dragged element (via <code>ui.item</code>), but I'm bothered by how we could access the box area it would be in if dropped. In my code, I have the following:</p>
  
  <pre><code>&lt;script&gt;
    $(function() {
      $( "#sortable-lists" ).sortable({
          start: function (event, ui) {
              ui.item.toggleClass('dragged');
          },
  
          stop: function (event, ui) {
              ui.item.toggleClass('dragged');
          },
  
          update: function (event, ui) {
              var data = $(this).sortable('serialize');
              var index = ui.item.index();
  
              ui.item.trigger('dropList', [ui.item.data('id'), index]);
             $.ajax({
                  data: data+"&amp;authenticity_token="+AUTH_TOKEN,
                  type: 'PATCH',
                  url: '/api/lists/update_order'
              });     
         }
      });
      $( "#sortable-lists" ).disableSelection();
    });
  &lt;/script&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.dragged {
    transform: rotate(3deg);
  }
  </code></pre>