title: giving an element a temporary fixed width when using jQuery UI draggable?
body: <p>I have some elements that have a relative width. however, when I drag one of these elements using the jquery UI's <code>draggable()</code> method, it shifts based on where I'd like to drag it. I tried the following code, attempting to use the start and stop callbacks:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;ul id='item-list'&gt;  
    &lt;li&gt;Item 1&lt;/li&gt;
    &lt;li&gt;Item 2&lt;/li&gt;
    &lt;li&gt;Item 3&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#item-list {
    width: 40%;
  }
  
  #item-list li {
    width:  100%;
  }
  </code></pre>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>$("#item-list li").draggable({
    revert : true,
    helper : 'clone',
    start : function() {
      $(this).css('width',$(this).width());
    },
    stop : function() {
      $(this).css('width','100%');
    }
  });
  </code></pre>
  
  <p>However, this only seems to work the second time I drag objects. is there some way to get this to work properly?</p>