javascript - 使用可通过 rowspan 和 colspan 排序的 Jquery 在 2 个表之间拖放

Question

我正在尝试移动另一个表中 rowspan > 2 或 colspan > 2 的行。

问题是，当我将其放入单元格中时，它会在该单元格中创建一个新的 tr。

我正在考虑当拖动的对象被删除时将父级 rowspan 或 colspan 设置为与子级相同。

http://jsbin.com/jumalofe/1/watch?html,js,output

假设“AIBD”应该是从 08-00 到 12:00 。我该怎么做？？

Answer 1

这就是你要做的。我们将使用 sortable 的 receive 事件:

receive( event, ui )

This event is triggered when an item from a connected sortable list has been dropped into another list. The latter is the event target.

receive:function(event, ui) {

      //we check if the <td> has rowspan property
     if(typeof ui.item.attr('rowspan') !== 'undefined' && ui.item.attr('rowspan') !== false){

        //if it does, we store it in a variable
        rowspan = ui.item.attr('rowspan');

        //the element we are dropping to, we set the rowspan there
        //(content is automatically inserted)
        $(this).attr('rowspan',rowspan);

        //we set the rowspan of sender element to 0, this is the case where
        //you are re-dragging the 'AIDB' to some other row, if you do, 
        //we want the previous row to be same as before, free of any rowspan
        ui.sender.attr('rowspan',0);

      }

      //same case for colspan
      if(typeof ui.item.attr('colspan') !== 'undefined' && ui.item.attr('colspan') !== false){

        colspan = ui.item.attr('colspan');
        $(this).attr('colspan',colspan);
        ui.sender.attr('colspan',0);

      }
}

<强> DEMO