How to enable drag and drop on double click of a image? - php

Question

I am working on drag and drop of images.my drag and drop is working fine.when i drag any image from sidebar and drop it then it shows a control box with dragged item and all this is working fine. Now i need to do the same functionality on click or double click of a image.when user will click any image in sidebar then that image will be automatically dropped in the dropable div area. This is my drag and drop code. Do i need to do same code again on double click of an image?
jQuery(document).ready(function ()
{
dragablediv();
});
function dragablediv()
{
var x = null;
jQuery(".get-image .drag").draggable({
helper: 'clone',
cursor: 'move',
tolerance: 'fit',
revert: true,
/* stop: function (event, ui) { ... } */
});
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").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() {
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');
}
}
});
}