title: How to drag and drop on click of element?
body: <p>I am working on jquery drag and drop. I have some images in my sidebar.user can drag the images in from sidebar and can drop then in dropable div.drag and drp is working fine. But now i need that when user will click on any (image/item) in sidebar then that image will be dropped in dropable div automatically. i have created a function of drag and drop. i am tryig to call this funtion onclick of sidebar images but its not working.Any idea how i can do this.This is my code to drag and drop images.  </p>
  
  <pre><code>jQuery(document).ready(function () {
  
       makemedragable();
  });
  
  function makemedragable()
  {
      var x = null;
      jQuery(".get-image .drag").draggable({
      helper: 'clone',
      cursor: 'move',
      tolerance: 'fit',
      revert: true,
      start: function (event, ui) {
          jQuery(this).prop('onclick', '');
      }   
      /* stop: function (event, ui) { ... } */
  
  });
  //jQuery(".droppable .drag").draggable({ });
  
      jQuery(".droppable").droppable({
          accept: '.drag',
          activeClass: "drop-area",
          drop: function (e, ui) {
              if (jQuery(ui.draggable)[0].id != "") {
  
                  x = ui.helper.clone(); 
                  ui.helper.remove(); 
  
                  jQuery("#droppable .resize-img").removeClass("mycurrent");
                  x.addClass("mycurrent");
  
                  jQuery("#droppable .resize-img").css({"display":"inline-table"});
                  /* To show Controls first time on Dragged Image*/
                  var droppedItemId = ui.draggable.attr("data-item-id");
                  jQuery(".controls ").attr("controls-item-id",droppedItemId);
                  jQuery("#droppable").find(".ui-resizable-handle").hide(); // To show Controls
                  jQuery(".controls").show();
                  dragEl        = jQuery(this); 
                  stopPosition  = dragEl.position(); 
                  var height = x.height();  // To show the controls with exact position
                  var width = x.width(); //alert("stoppos"+stopPosition+"leftpos"+leftPos);
                  var topPos = ui.position.top;
                  var leftPos = ui.position.left;
                  var mytop = topPos+height;
                  var myleft = leftPos + width /2; 
                      //alert("left"+leftPos);        
                  jQuery(".controls").css({"top": mytop , "left":myleft, "display":"block"});
  
                  x.draggable({   
                      helper: 'original', 
                      cursor: 'move',
                      containment: '#droppable',
                      tolerance: 'fit',
  
                      drop: function (event, ui) { 
                          jQuery(ui.draggable).remove();
  
                      },
                      drag: function() {
  
                      },
                      stop: function() {
  
                          jQuery("#droppable .resize-img").removeClass("mycurrent");
                          x.addClass("mycurrent");
                          dragEl        = jQuery(this);
                          stopPosition  = dragEl.position();
                          var leftPos =    dragEl.position().left; 
                          var topPos =     dragEl.position().top; 
                          stopOffset  = dragEl.offset();
                          document_id   = dragEl.data("document-id");
                          signer_id     = dragEl.data("signer-id");
                          var height = x.height();
                          var width = x.width();
                          var mytop = stopPosition.top+height;
                          //var myleft = stopPosition.left + width /2; 
  
                          jQuery(".controls").css({"top": mytop , "left":myleft, "display":"block"});
  
                          dataItem = jQuery(this).attr('data-item-id');
                          jQuery("#droppable").find(".ui-resizable-handle").hide();
                          jQuery(".controls").hide();
                          jQuery(this).closest(".drag").find(".ui-resizable-handle").show();
                          jQuery(".controls").show();
                          jQuery(".controls ").attr("controls-item-id",dataItem); 
  
                      } 
  
                  }); 
  
                  x.resizable({
                      maxHeight: jQuery('#droppable').height(),
                      maxWidth: jQuery('#droppable').width(), 
                      aspectRatio: true,
                      helper: "ui-resizable-helper", 
                      handles: "nw, ne, sw,se" 
                  });  
  
                  //x.addClass('remove');
  
                  x.appendTo('.droppable');
  
  
              }
          } 
      });
  
  /* To remove the Element on remove click */
  jQuery("#droppable .controls li.canvas-remove-item").on('click', function (e) 
  {
      var removeId = jQuery(".controls").attr("controls-item-id");
      //jQuery('#droppable .resize-img').filter('[data-item-id = '+removeId+']').remove();
      jQuery('#droppable .mycurrent').remove();   
      jQuery("#droppable").find(".ui-resizable-handle").hide();
      jQuery(".controls").hide();
  
  });  
  
  
  }
  </code></pre>
  
  <p>I am trying it in this way.Please help to solve the issue.</p>
  
  <pre><code>jQuery( "ul.get-image .resize-img" ).click(function( event ) {
        var $item = jQuery( this );
          //$target = jQuery( event.target );
  
          addImage( $item );
  
        return false;
  });
  
  
  function addImage( $item ) {
  
          var x = null;
          var x  = $item.clone();
          jQuery(".droppable .resize-img").removeClass("mycurrent");
          x.addClass("ui-draggable-dragging mycurrent ui-resizable");
          x.appendTo('.droppable');
  
          jQuery(".droppable .resize-img").css({"display":"inline-table"});
          /* To show Controls first time on Dragged Image*/
          var droppedItemId = x.attr("data-item-id");
  
          jQuery(".controls ").attr("controls-item-id",droppedItemId);
          jQuery(".droppable").find(".ui-resizable-handle").hide(); // To show Controls
          jQuery(".controls").show();
  
          var height = x.height();  // To show the controls with exact position
          var width = x.width(); //alert("stoppos"+stopPosition+"leftpos"+leftPos);
          var topPos = x.position().top;
          var leftPos = x.position().left;
          var mytop = topPos+height;
          var myleft = leftPos + width /2; 
          jQuery(".controls").css({"top": mytop , "left":myleft, "display":"block"});
  
          mydraggable(x); 
  
          myresizeable(x); 
  
  
  }
  </code></pre>