jQuery Forum

Hi, i have a drag and drop function in my web app which allow user to drag some food picture and drop inside their kitchen picture. my script is like this:

1. <script type="text/javascript">
       $(function () {
   
           $('#drag img').draggable({ stack: '#drag img' });
           $('#drop img').droppable({
               drop: function (event, ui) {
                   addItem(event, '#formData');
               }
           });
       });
   
       function addItem(event, targetView) {
           event.preventDefault();
           var controllerUrl = 'CreateFood';
           var dialogBox = $('<div></div>');
           dialogBox.empty();
           dialogBox.load(controllerUrl).dialog({
               autoOpen: true,
               title: 'Create Food',
               modal: true
           });
           dialogBox.dialog("option", "buttons", {
               "Cancel": function () {
                   alert('Cancel');
                   dialogBox.dialog('close');
                   dialogBox.empty();
               },
               "Submit": function () {
                   alert('Submit');
                   var temp = dialogBox;
                   var frm = $('#formData');
                   $.ajax({
                       url: frm.attr('action'),
                       type: 'POST',
                       data: frm.serialize(),
                       success: temp.dialog('close')
                   });
               }
           });
       };
   </script>

But currently i have a problem, the dialog only show when user 1st drag a pic and drop it on the droppable. All subsequent drop event do NOT trigger the pop up dialog anymore. I couldnt figure out wat is the prob.. Really hope can get some help here...
Thanks...