Droppable dynamic tab

Droppable dynamic tab

Hi All,

I'm very new to jQuery and am looking to use it to do some somewhat advanced UI features on our corporate web portal.  I am loading a tab panel dynamically and would like to have the tabs be droppable receivers of a draggable component.  I load the tabs, set them as droppable and then set the draggable component however the tabs do not register as being dropped upon by the draggable.  If I create a static tab it works as intended.  I'm sure I'm doing something stupid so if anyone could shed some light I'd appreciate it.  Below is my rough sample of what I'm trying to do:
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5. <title>JQuery Test</title>
  6. <link type="text/css" href="css/smoothness/jquery-ui-1.8rc3.custom.css" rel="stylesheet" />
  7. <style type="text/css">
  8. #tabs li .ui-icon-close { float: left; margin: 0.4em 0.2em 0 0; cursor: pointer; }
  9. #add_tab { cursor: pointer; }
  10. </style>
  11. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
  12. <script type="text/javascript" src="js/jquery-ui-1.8rc3.custom.min.js"></script>
  13. <script type="text/javascript">
  14. var droppable = function(event, ui) {
  15. alert('dropped on tab ' + ui);
  17. }
  19. $(function(){
  20. var $tab_indx = 0;
  22. var $tabs = $('#tabs').tabs({
  23. tabTemplate: '<li class="droppable"><a href="#{href}">#{label}</a> <span class="ui-icon ui-icon-close">Remove Tab</span></li>',
  24. ajaxOptions: {
  25. error: function(xhr, status, index, anchor) {
  26. $(anchor.hash).html("Oops.");
  27. }
  28. },
  29. load: function(event, ui) { alert('loading'); }
  30. });
  33. loadTabs();

  35. $('li.droppable').droppable({
  36. drop: droppable
  37. });
  39. $('#draggable').draggable({
  40. revert: 'invalid'
  41. });
  43. function addTab(jsonTabData) {
  44. var tab_title = jsonTabData.name;
  45. var tab_url = jsonTabData.url;
  47. $tabs.tabs('add', tab_url, tab_title);
  49. if (!jsonTabData.isEnabled) {
  50. $tabs.tabs('disable', $tab_indx);
  51. }
  52. $tab_indx++;
  53. }
  55. function loadTabs() {
  56. $.getJSON('http://localhost:65080/jquery_tests/gettabs.php?callback=?', function(data) {
  57. $.each(data, function() {
  58. addTab(this);
  59.   });
  60. });
  61. }
  62. });
  64. </script>
  65. </head>
  66. <body>
  67. <div id="container">
  68. <div id="tabs">
  69. <ul/>
  70. </div>
  72. <div id="draggable" class="ui-state-highlight" style="width: 200px;">
  73. <h4>dropping item</h4>
  74. </div>
  75. </div>
  76. </body>
  77. </html>

Thanks!