title: Add a new class to a draggable clone and not to the original element
body: <p>I have a list of elements that are draggable and when I drag one of the elements I want it to:</p>
  
  <ol>
  <li>Clone the element on drag start</li>
  <li>Add new class to new cloned element on drop</li>
  </ol>
  
  <p>Problem: When I drop the new clone element, the class is applied to all draggable elements. </p>
  
  <p>How do I apply the class only to the new cloned element.</p>
  
  <p>Here is the code I am working with:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.draggable-item').draggable({
      appendTo: '.drop-container',
      helper: 'clone',
      start: function (event, ui) {
          $(this).show();
      },
      stop: function (event, ui) {
          $(this).show()
          // .addClass( "drag-active")
          .draggable(".draggable-item");
  
      }
    });
  
   $('.runway-items-container').droppable({
      accept: '.draggable-item',
      drop: function (event, ui) {
          $('.draggable-item').draggable()
          $( this )       
            .offset();
  
      }
    });
  
  $('.runway .drag-active').draggable({
      helper: 'clone',
      start: function (event, ui) {
          $(this).hide();
      },
      stop: function (event, ui) {
          $(this).show();
  
      }
    });</code></pre>
  </div>
  </div>
  </p>