title: How to drop the draggable div when onclick on it?
body: <p>I have an element which needs to drop into droppable(<code>Jquery UI droppable</code>) div while drag and drop(works perfect), but i need to drop the same element while onclick on it. </p>
  
  <p><strong>Reason why i need the above said functionality:</strong> The code gets repeat while used separate code to clone and append the element into droppable div when onclick. I need to use same code for both. How to pass the onclicked element (draggable element) into drop function.?</p>
  
  <pre><code>$(document).ready(function() 
  {
      var cloned_element;
  
      $("#draggable").draggable({
          helper: 'clone',
          revert: true
      });
  
      $("#droppable").droppable(
      { 
          drop: function(event, ui) 
          {
              cloned_element = $(ui.helper).clone();
              ui.helper.remove();
              cloned_element.appendTo(this);
  
              $(this).addClass("ui-state-highlight").find("p").html("Dropped!");
          }
      });
  
      $('#draggable').on('click',function()
      {
          $(this).trigger("drop", $('#droppable'));
      });    
  });
  </code></pre>
  
  <p>Sample code in <a href="https://jsfiddle.net/arunvalaven/eLzse0ym/" rel="nofollow">Jsfiddle..!</a></p>