title: jQuery drag-drop, clone and rotate
body: <p>Im trying to get a div to first clone itself then drag and drop, that works but i need to let the user rotate it aswell.</p>
  
  <p>look at the code here: <a href="http://jsfiddle.net/zduEZ/" rel="nofollow">http://jsfiddle.net/zduEZ/</a></p>
  
  <pre><code>// Your original element
  var ele = $('.draggable');
  
  $('.draggable').draggable({ helper: "clone" });
  $('.draggable').bind('dragstop', function (event, ui) {
      $(this).after($(ui.helper).clone().draggable()); });
  
      // Create handle dynamically
      $('&lt;div&gt;&lt;/div&gt;').appendTo(ele).attr('id', 'handle').css({
          'position': 'absolute',
          'bottom': 5,
          'right': 5,
          'height': 10,
          'width': 10,
          'background-color': 'green'
      });
  
      ele.css('position', 'relative');
  
      $('#handle').draggable({
          handle: '#handle',
          opacity: 0.01,
          helper: 'clone',
          drag: function (event, ui) {
              var rotateCSS = 'rotate(' + ui.position.left + 'deg)';
              $(this).parent().css({
                  '-moz-transform': rotateCSS,
                  '-webkit-transform': rotateCSS
              });
          }
      });
  </code></pre>
  
  <p>i want it to rotate like this example: <a href="http://jsfiddle.net/avPf6/1/" rel="nofollow">http://jsfiddle.net/avPf6/1/</a></p>
  
  <p>I cant find the error in my code.
  Thank you for your help.</p>