jquery ui How to get a id of a draggable item when i click on the droppable item

Question 1

UPDATE 3: It doesn't look like there is a method to determine which "draggable" item is contained within the droppable. You will have to have a method to remember what was dropped into the container. The data() function on a jquery object is a good method for this.

In the drop function:

var itemId = $(ui.draggable).attr("id");
$(this).data('dropped', itemId);

In the click callback use:

if ($(item).data('dropped'))
{
    alert($(item).data('dropped'));
}

NOTE: This will only remember the most recently dropped item and will not remove it once it's dropped into a new container - that should be straightforward to implement.

UPDATE 2: The following should provide an alert with the id of the draggable item. I put the conditional in there to determine if it were moved into the container at the bottom.

$('.ui-widget-content').click(function (event) {
    var item = event.target;

    if (item.offsetTop >= 140)
    {
        alert(item.id);
    }
});

new fiddle: http://jsfiddle.net/KLLCg/7/

UPDATE: It looks like you wanted something different. If you just want the ID of the destination container you should be able to get it using event.target.id

drop: function (event, ui) {
    $(this).addClass('ui-state-highlight');
    $(ui.draggable).addClass('ui-state-highlight');
    $(ui.draggable).draggable('enable');

    var itemId = $(ui.draggable).attr("id");
    var destId = event.target.id ;
    var message = '"' + itemId + '" was dragged to "' + destId + '"';
    alert(message);
    console.log(message);
}

see updated fiddle: http://jsfiddle.net/KLLCg/6/

ORIGINAL ANSWER

First - you should put your click handler inside the document.ready. I think you might be having a problem because the event target object will be whatever was clicked and the <p> element doesn't have an id. If I understand your problem the following code may work.

         $('.ui-widget-header').click(function (event) {
             var item = event.target;
             if (item.nodeName == 'P') {
                 item = item.parentNode;
             }
             alert(item.id);
         });

jsfiddle example: http://jsfiddle.net/KLLCg/3/

Question 2

Try this one You just have to store drag object id into "dragId".

<!DOCTYPE html>

<link href='../../css/style.css' rel='stylesheet' type='text/css'/>
<script type="text/javascript" src = "js/jquery.min.js"></script>
<script type="text/javascript" src = "js/jquery-ui.min.js"></script>
<script type="text/javascript" src = "js/jquery-ui.js"></script>

<head>

    <style>

        .dragAndDrop
        {

        }

        .dragBoxStyle
        {
            position:absolute;
            left:170px;
            top:100px;

        }

        .dropBoxStyle
        {
            position:absolute;
            left:170px;
            top:300px;
        }

        .dragImageStyle
        {

        }

        .dropImageStyle
        {

        }

    </style>

    <script>

        var dragId;

        $(function()
        {
            $(".dragImageStyle").draggable();

            $(".dragImageStyle").mousedown(function()
            {
                dragId = (this.id);
            });


            $( ".dropImageStyle" ).droppable(
            {
                drop: function( event, ui ) 
                {
                    alert("Droped on "+this.id+" : "+dragId);
                }
            });
        });

    </script>

</head>

<body>

    <div id = "dragAndDrop">

        <div id = "bg">
            <img src = "images/BG.jpg"></img>
        <div>

        <div id = "dropTiles" class = "dropBoxStyle">
            <img id = "drop1" class = "dropImageStyle" src = "images/Tab1_V.jpg"><img>
            <img id = "drop2" class = "dropImageStyle" src = "images/Tab2_V.jpg"><img>
            <img id = "drop3" class = "dropImageStyle" src = "images/Tab3_V.jpg"><img>
            <img id = "drop4" class = "dropImageStyle" src = "images/Tab4_V.jpg"><img>
        </div>  

        <div class = "dragBoxStyle">
            <img id = "dragBox1" src = "images/BlankBox.png"><img>
            <img id = "dragBox2" src = "images/BlankBox.png"><img>
            <img id = "dragBox3" src = "images/BlankBox.png"><img>
            <img id = "dragBox4" src = "images/BlankBox.png"><img>
        </div>

        <div id = "dragTiles" class = "dragBoxStyle">
            <img id = "drag1" class = "dragImageStyle" src = "images/Tab1_N.jpg"><img>
            <img id = "drag2" class = "dragImageStyle" src = "images/Tab2_N.jpg"><img>
            <img id = "drag3" class = "dragImageStyle" src = "images/Tab3_N.jpg"><img>
            <img id = "drag4" class = "dragImageStyle" src = "images/Tab4_N.jpg"><img>
        </div>          

    </div>
</body>