title: Change HTML when on start dragging with Jquery UI
body: <p>I've been working on a drag and drop UI with jquery UI.</p>
  
  <p>I have a bunch of elements like this, that are draggable:</p>
  
  <pre><code> &lt;a href="#" draggable="true" id="server" class="draggable"&gt;&lt;i class="fa fa-laptop fa-fw"&gt;&lt;/i&gt; Server&lt;/a&gt;
  </code></pre>
  
  <p>I can drag and clone this onto a drop zone.  But when I start dragging the original element, I want to change the HTML to be</p>
  
  <pre><code>&lt;i class="fa fa-laptop fa-5"&gt;&lt;/i&gt;
  </code></pre>
  
  <p>The current code looks like this, but should I be doing something in the start event handler to clone, and change the html of the cloned element?</p>
  
  <pre><code>function MakeDraggable(ele) {
      ele.draggable({
          grid: [20, 20 ],
          //revert: "invalid",
          helper: 'move'
      });
  }
  
  $(function() {
  
      // Make the .draggable class  a Draggable
      //
      $( ".draggable" ).draggable({
          grid: [ 20, 20 ],
          helper: 'clone',
          appendTo: '#dropzone-panel',
          start: function(event, ui) {
              console.log("Dragging me.....");
          }
      });
  
      // Setup the dropzone
      //
      $("#dropzone-panel").droppable({
          drop: function(event, ui) {
              console.log("Drop Event Fired");
  
              // Get the original element id
              var id = ui.draggable.attr("id");
  
              // If this element is a copy already
              // then dont clone it.
              //
              if (id.indexOf("-copy-") &gt;= 0) {
                  console.log("This is a copy");
              } else {
                 // This is the orginal, so clone and create a new id 
                 var number_of_clones = document.querySelectorAll('*[id^="'+id+"-copy-" +'"]').length;
                  console.log("found [" +number_of_clones +"] copies");
                  var pos = ui.position;
                  var $obj = ui.draggable.clone().attr("id", id+"-copy-"+number_of_clones);
                  $obj.css({
                      position: 'absolute',
                      top: pos.top + "px",
                      left: pos.left + "px"
                  });
                  $obj.appendTo("#dropzone-panel");
  
                  // Make the clone draggable
                  MakeDraggable($obj);
  
              }
          }
      });
  </code></pre>