如何在双击图像时启用拖放功能？

Question

我正在处理拖放图像。我的拖放工作正常。当我从侧边栏拖动任何图像然后放下它然后它显示一个带有拖动项目的控制盒，所有这一切都正常。现在我需要在单击或双击图像时执行相同的功能。当用户单击侧边栏中的任何图像时，该图像将自动放入可丢弃的div区域。这是我的拖放代码。双击图像时是否需要再次执行相同的代码？

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');

            }
        } 
    });
}