title: jQuery draggable clone size while dragging
body: <p>I'm developping a drag-and-drop application. I have a droppable container and draggable.</p>
  
  <pre><code>$( "#dragshock" ).draggable( 
      {
          helper: "clone",
          cursor: 'move',
          drag: resizeContainer
      }
  );
  </code></pre>
  
  <p>The function called by drag is this one:</p>
  
  <pre><code>function resizeContainer(e, ui) {
      var defaultSize = 108;
      var factor = ((ui.position.top)/19);
      var correcteSize = defaultSize + factor;
      $(this).width(correcteSize);
  }
  </code></pre>
  
  <p>The function on the droppable container is this one:</p>
  
  <pre><code>$("#selectedpicture").droppable({
      drop: function (event, ui) {
          var $canvas = $(this);
          if (!ui.draggable.hasClass('canvas-element')) {
              var $canvasElement = ui.draggable.clone();
              $canvasElement.addClass('canvas-element');
              $canvasElement.draggable({
                  containment: '#geselecteerdefoto'
              });
              $canvas.append($canvasElement);
              var defaultSize = 108;formaat
              var factor = ((ui.position.top)/19);
              var correcteSize = defaultSize + factor;
              var imgSize = correcteSize;
  
              $canvasElement.css({
                  left: (ui.position.left),
                  top: (ui.position.top),
                  width: imgSize,
                  position: 'absolute'
              });
          }
      }
  });
  </code></pre>
  
  <p>At the moment, the "drag: resizeContainer" line inside the draggable results in the dragged container to resize while dragging, instead of the clone which follows the mouse pointer.</p>
  
  <p>What I want to achieve though, is WHILE dragging, the object allready visually resizes when dragging down inside the container. When dropped, that resize should be held.</p>
  
  <p><a href="http://jsfiddle.net/q7zkpc6s/" rel="nofollow">http://jsfiddle.net/q7zkpc6s/</a></p>