jQuery:通过拖放获取所选图像的名称

我正试图弄清楚如何使用jquery获得在拖放函数中选择的图像的名称。

为此，我使用以下代码：

$(document).ready(function () {
    var x = null;
    //Make element draggable
    $(".drag").draggable({
        helper: 'clone',
        cursor: 'move',
        tolerance: 'fit',
        stack: '.drag',
        revert: "invalid"

    });
            $("#droppable").droppable({

                    drop: function (e, ui) {
                    var srcc=$("#droppable").find('img').attr('src');
                    alert(srcc);    


                    if ($(ui.draggable)[0].id != "") {
                        x = ui.helper.clone();
                        ui.helper.remove();


                    x.draggable({
                        //helper: 'original',
                        containment: '#droppable',
                        tolerance: 'fit',
                        stack: '.drag'

                    });
                    x.resizable({
                      animate: true,
                      //aspectRatio: 16 / 9,
                      helper: "ui-resizable-helper",
                      handles: "n, e, s, w, nw, ne, sw,se"
                    });
                    x.appendTo('#droppable');
                }
                }
            });
});

请注意这一行：

            var srcc=$("#droppable").find('img').attr('src');
            alert(srcc);

问题是，在drop中，我无法获得所选图像/div的名称！

附言：图像的名称，我指的是图像的实际URL：

示例：images/image_name.jpg

我创建了一个jsfiddle来进一步解释这个问题。

请将图像拖放到下面的框中，并记下alert();消息。

JSFIDDLE:

http://jsfiddle.net/7s1w4jgq/