title: Change size of draggable element upon start of drag
body: <p>I have a draggable and droppable layout. I'm creating a draggable object when adding it from a typeahead search selection. However I have some &quot;placement&quot; issues. The size of the draggable object is much larger than the container it should be dropped in. This lead to some dropping issues.</p>
  <p>I wan't to resize the element to <strong>half it's current size</strong> upon dragging start. How do I do this? The problem is not present in the fiddle unless the <code>width</code> of <code>.semester</code>is set to around <code>30%</code>.</p>
  <p>Here's the <a href="https://jsfiddle.net/8g2oqp0h/11/" rel="nofollow noreferrer">JSFiddle</a></p>
  <h1>EDIT:</h1>
  <p>After having implemented @user619081 solution I wanted make this happen only if the object was very large. I made a global variable <code>var tempWidth</code> and updated the code to the following:</p>
  <pre><code>start: function(event, ui) {
      if(tempWidth &lt; $(this).width()){
          $(this).addClass(&quot;moveable&quot;);
      }
      tempWidth = $(this).width();
  },
  stop: function(event, ui) {
      $(this).removeClass(&quot;moveable&quot;);
  }
  </code></pre>