Drag and drop on tables using Jquery UI

Question

I am trying to make a drag and drop feature from table1 to table2 and want to make sure the dropped table2 cell is empty when the user drag table1 itme. If the table2 cell is empty, then I can drop it otherwise it will return to the table1.

 var dragging =null;

 td = $('.table td');

   $(td).draggable({
       cursor:'pointer',
       snap:$('td:empty')       
   })

  $(td).droppable({
        drop:function(event, ui){
         if($(this).text()=='') {  // $(this).is(':empty:) doesn't work either
             console.log('drop now!')
         }else{
            console.log('not empty') //revert 
          }
      }
  })

I am not sure how to revert the dragged item back to table1 and how to detect if the dropped cell already has data.

Any helps? Thanks a lot!

You could probably do something like this: http://stackoverflow.com/a/3089432/341611 — EmmyS, Aug 01 '13 at 20:36

score 0 · Accepted Answer · answered Aug 01 '13 at 20:44

The .droppable() has an option named accept which will accept a function as value. If the function returns true, $(this) is considered a vaild drop target. Note that the drop function will then only be called if accept at all returns true.

$('td').droppable({
    accept: function(ev) {
        return $(this).is(':not(:empty)');
    },
    drop: function(ev, ui) {
        alert('Drop successful!');

        // Do your stuff
    },
    hoverClass: 'hover'
});

See the following JS Fiddle: http://jsfiddle.net/7Xd6n/2/

Drag and drop on tables using Jquery UI

1 Answers1