title: Change Size of Sortable Element on drag JQuery UI
body: <p>Here's a small fiddle for my issue:</p>
  
  <p><a href="http://jsfiddle.net/Yc9WY/52/" rel="nofollow">http://jsfiddle.net/Yc9WY/52/</a></p>
  
  <p>Essentially, one box of items is much larger than the other. So, dragging and dropping with sortable is a challenge. </p>
  
  <p>First, I changed the size of the element on start</p>
  
  <pre><code>$(function() {
      $( "#sortable1, #sortable2" ).sortable({
         connectWith: ".connectedSortable",
         start: function(event, ui){
             $(ui.item).width($('#sortable2 li').width());
         }               
      }).disableSelection();
  });​
  </code></pre>
  
  <p>But, I wasn't sure how to move the resized element to the cursor of the mouse. Basically, if I click any distance away from the left handside of an element in the left list, it becomes hard to drop the element onto the smaller list.</p>
  
  <p>I was trying to move the element to the mouse position using:</p>
  
  <pre><code>$(ui.item).offset({top: event.pageY, left: event.pageX});
  </code></pre>
  
  <p>But, it didn't seem to work.</p>
  
  <p>Further clarification:</p>
  
  <p><strong>(List 1)                                    (List 2)
  -----------------------------------------   ---</strong></p>
  
  <p>Moving element from list 1 to list 2 is challenging because of their different sizes. So, I resized elements in list 1 to list 2 size. Now, if you click</p>
  
  <p><strong>-------------------------------------x---   ---</strong></p>
  
  <p>The element looks like</p>
  
  <p><strong>---</strong>_<em><strong></em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__</strong><em>x</em>__   <strong>---</strong></p>
  
  <p>where x indicated the mouse position. Essentially, I want to move the element to the mouse position to make the dragging to list 2 easier</p>
  
  <p>Are there any suggestions? Thanks!</p>
  
  <p>Edit: Sorry, I don't have enough rep to post an image, but...</p>
  
  <p><strong>[<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>__<em>_</em>_]</strong>  (before click)</p>
  
  <p><strong>[<em>_</em>_]</strong>-------------------- x      (click with x marking the location of the click)</p>
  
  <p>I essentially want to move the now smaller element to the same position as the mouse.</p>
  
  <p>Thanks again!</p>