使用 Jquery UI 拖放表格

Question

我正在尝试制作从table1 到table2 的拖放功能，并希望在用户拖动table1 itme 时确保拖放的table2 单元格为空。如果table2 单元格是空的，那么我可以删除它，否则它将返回到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 
          }
      }
  })

我不确定如何将拖动的项目恢复为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/