Making Tables / Table elements Droppable
I have been struggling to make table elements droppable. Is this
possible?
$(document).ready(function(){
$(function () {
//Degine Drag Options
var dragOpts = {
revert:true
}
$('#header').load('test.html');
//Make the Li items in the toolbox draggable
$('#toolBox').draggable(dragOpts);
//make the target droppable
$(".droppable").droppable({
hoverClass: 'ui-state-active',
drop: function(event, ui){
alert('hello!')
}
});
});
});
</script>
<body>
<div id="toolBox">
<ul>
<li>Article</li>
<li>Header</li>
</ul>
</div>
<div>
<table border="1" width="600" >
<tbody>
<tr class="droppable">
<td> Test</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>