jquery - 使用 Jquery UI 拖放表格

Question

table1我正在尝试从to制作拖放功能，并希望在用户拖动itme时table2确保拖放的单元格为空。如果单元格是空的，那么我可以删除它，否则它将返回到.table2table1table2table1

 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 
          }
      }
  })

我不确定如何将拖动的项目恢复为原样，table1以及如何检测拖放的单元格是否已有数据。

有什么帮助吗？非常感谢！

Answer 1

.droppable()有一个名为的选项，accept它将接受一个函数作为值。如果函数返回true,$(this)则被认为是有效的放置目标。请注意，drop只有在 accept at all 返回时才会调用该函数true。

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

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

请参阅以下 JS Fiddle：http: //jsfiddle.net/7Xd6n/2/