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/