Trouble with .droppable in a table
I'm attempting to adapt the code in the photo manager droppable demo to my app. The photo manager demo allows movement between two <div> objects, each containing a <ul>. In my app, I want to drag out of a <td> and into a <div>, and that works fine. I adapted the photo manager demo code by placing a single <li> in a <ul> which is contained in a <td>. However, I can't seem to get the <ul> in the <td> to accept a draggable. For instance, the <table> looks like this:
<table id="photos" ... class="photo ui-helper-reset ui-helper-clearfix">
<tr bgcolor=FFFFFF class="photo ui-helper-reset ui-helper-clearfix">
<td width='25%' align=center class="photo ui-helper-reset ui-helper-clearfix">
<ul id="photo" class="photo ui-helper-reset ui-helper-clearfix">
<li class="ui-widget-content ui-corner-tr">
<div class="ui-widget-header">1</div>
<img src='image1.jpg' border='0'>
</ul>
</td>
</tr>
</table>
Then I have the following jQuery code:
$('#photo').droppable({
accept: '#jail li',
activeClass: 'custom-state-active',
drop: function(ev, ui) { alert('dropped');
}
});
I never get the alert indicating a drop has taken place. Can someone tell me what I'm doing wrong? Thanks!
Regards,
David