drag and drop: draggable divs disappear

drag and drop: draggable divs disappear

Hi,

i am experimenting with the drag and drop feature but it wont work. Maybe someone can check it.

i have a table

  1. <div id="content"><table>
  2. <tr><td><div id="id1" class="dragable" style="width:10px;height:10px;background:green"></div> Hello World</td></tr>
  3. <tr><td><div id="id3" class="dragable" style="width:10px;height:10px;background:green"></div> Hello World</td></tr>
  4. <tr><td><div id="id3" class="dragable" style="width:10px;height:10px;background:green"></div> Hello World</td></tr>
  5. </table></div>
  6. <div id="sidebar">
  7. <div>
  8. <ul>
  9. <li class="dropable" id="idd1">Hello World</li>
  10. <li class="dropable" id="idd3">Hello World</li>
  11. </div>
  12. </div>

inside each table row is a div with the class dragable. On the sidebar is a list with each li is dropable. I included the jquery classes and use this script:

  1. echo

    "<script type=\"text/javascript\">

    $(function() {

    $( \"div.dragable\" ).draggable();

    $( \"li.droppable\" ).droppable({

    drop: function( event, ui ) {

    alert('Hello World');

     

    }

    });

    });

    </script>"

    ;

 

If i load the page, no error will be displayed. I see the green dragable div and i am able to drag it around. But if i move the div outside the table it will disappear.

the above table code is only a snippet the table is sourrounded by some more divs.  

Any ideas?