How to drag the element and drop into the certain element

Question

I am trying to do the drag and drop feature in my codes.

There are at least two tables in my page and I want to drag table 1 cell to table 2 cell.

most of table 2 cells are empty.

My html

Table 1

<table class = 'dragtable'>

//bunch of cells...

</table>


Table 2

<table class = 'dragtable'>

//bunch of cells...

</table>

In my codes:

  obj = $('.dragtable td');
   emptyCell = $('.dragtable td:empty');
   $(obj).draggable({
       cursor:'pointer',
       snap:emptyCell
   })

My codes above can make the user drag the cell but I need to make sure the user can only drop the item to the empty cell not everywhere in the page. The emptyCell doesn't work in my case.

PS: I can't change the table class name because it affects many other things.

Any tips here? Thanks a lot!

Answer 1

sounds like you need to make your empty cells droppable see the link below http://jqueryui.com/droppable/