jquery function: how to get this element id?

jquery function: how to get this element id?

Hi guys,
i'm trying to do a drag and drop...,practically a newbie to jquery & all

basically i have a list of draggable objects and a container(that these draggable objects can be dropped into)

all i want to do is whenever i drop one of the objects onto the container, an alert would pop, "you have dropped "item X" into the container".

i got the object moving but alerting the user seems to be a problem. anyone see what i'm doing wrong or what i'm not doin

code below



  3. <HTML>
  4. <HEAD>
  5.     <script type="text/javascript"
  6.         src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  7.     <script type="text/javascript"
  8.         src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
  9. </HEAD>
  10. <BODY>
  11.     <DIV id="fbox"  class="movable" style="width:150px;height:150px;background-color:red;border:1px solid #999999"> &nbsp; </DIV>
  12. <DIV id="sbox" class="movable" style="width:150px;height:150px;background-color:red;border:1px solid #999999"> &nbsp; </DIV>
  13. <DIV id="container" style="width:150px;height:150px;background-color:blue;border:1px solid #999999"> &nbsp; </DIV>
  14.     <SCRIPT TYPE="text/javascript">
  15. var dragObject = null; //object we can drag
  16.     $(document).ready(function(){
  17.         $(".movable").draggable(
  18. //{
  19. // dragObject=this;
  20. //}
  21. );
  22. $(".movable").draggable();
  23. $("#container").droppable(
  24. {
  25. drop: alertUser
  26. }
  27. );
  29. function alertUser()
  30. {
  31. alert('you dropped ' + dragObject.id); //getting undefined here
  32. }
  34. $( ".movable" ).bind( "drag", function(event, ui) {
  35. dragObject=ui;
  36. });
  37.     });
  38.     </SCRIPT>
  39.  
  40. </BODY>
  41. </HTML>
any suggestion would be greatly appreciated