accessing draggable items in jquery ui

i have built an interface for dragging images into a "save area" and i dont know how to access the actual html markup- such as the img src tag?

i have this

$(function(){
        $('.draggable').draggable();
        $('#droparea').droppable({
           drop: function(ev,ui) {
                 //do magic
            },
            out: function(event, ui){
                removeone();     开发者_运维知识库       
            }
        });
    });

what do i use to access the image src?

<img border="0" src="http://bla.png" class="draggable ui-draggable" style="position: relative;">

i have a few hundred images.. what should i do so that when they are dropped i can get access to the src?

Working demo

In the drop function, you access the object with "ui.draggable":

For example:

$trash.droppable({
            accept: "#gallery > li",
            activeClass: "ui-state-highlight",
            drop: function( event, ui ) {
                processImage( ui.draggable );
            }

It passes a Jquery object to the "processImage" function. There you can access the properties of the image in two ways:

1.-As a Jquery object: $item.attr("src")

2.-Or as the DOM element: $item.get(0).src

 function processImage($item)
{
alert($item.attr("src"));
}

Of course, you can get rid of "processImage" function, and access directly to the object as:

ui.draggable.attr("src") 

or

ui.draggable.get(0).src

You can access it with the ui parameter.

drop: function (ev, ui) {
    var image_source = ui.helper.attr('src');
}