在一个实例中将多个td拖放到同一个表中的一个tr到另一个tr？

Question

目前正在使用jquery ui在表中拖放td。

表格中有3列和3行。

1. 在第一种情况下，如果我们拖动任何单元格并将其放在同一列中，则可以通过在上面的tr中创建新行和行盘与其他td来克隆并放入同一列中
2. 在第二种情况下，如果从第二列拖动单元格，则通过克隆并通过在上面的tr中使用其他td创建新行和rowspan来拖动该单元格和最右边的单元格。
3. 在第三种情况下，如果从第一列拖动单元格，则它将拖动并克隆整行并将其删除。

我完成了第一个案例。但是无法找到第二和第三种情况的解决方案。

请找到以下链接供您参考。

＆＃13;
＆＃13;
 var previd, firstid,nextid, rowSpanPrev, rowSpanFirst,rowSpanNext;

        $(document).ready(function () {

            // var helper = $("#td01").draggable("option", "helper");
            $('td').attr('rowspan', '1');

            //////////////////////////////////////////////////// For 1 St Column Drag And Drop////////////////////////////////////////////////////
            $(".red").parent().draggable({ helper: 'clone',
                cursor: "move",
                start: function (event, ui) {
                    $(this).css('background-color', '#F6CECE');
                    //alert($(event.id));

                },
               
                stop: function (event, ui) {
                    $(this).css('background-color', 'white');
                }
            });
            ////////////////////////////////////////
            $(".red").parent().droppable({
                accept: ".tr",
                activate: function (event, ui) {
                    $(this).position('top');
                    $(this).css('offset', 'top');
                },
                over: function (event, ui) {
                    //   previd = $(this).closest('td').prev().attr('id');
                    //   nextid = $(this).closest('td').next().attr('id');
                    $(this).css('background-color', '#F6CECE');
                },
                out: function (event, ui) {
                    $(this).css('background-color', 'white');
                },
                drop: function (event, ui) {
                    $(this).closest('tr').after($(ui.draggable).clone().css('background-color', 'white').html());
                    $(this).css('background-color', 'white');
                }
            });
            //////////////////////////////////////////////////// For 2 nd Column Drag And Drop////////////////////////////////////////////////////
            $(".blue").draggable({ helper: 'clone',
                cursor: "move",
                start: function (event, ui) {
                    $(this).css('background-color', '#E0F8EC');
                },
                stop: function (event, ui) {
                    $(this).css('background-color', 'white');
                }
            });
            //////////////////////////////////////////
            $(".blue").droppable({
                accept: ".blue",
                activate: function (event, ui) {
                    $(this).position('top');
                    $(this).css('offset', 'top');
                },
                over: function (event, ui) {
                    previd = $(this).closest('td').prev().attr('id');
                 //   nextid = $(this).closest('td').next().attr('id');
                    $(this).css('background-color', '#E0F8EC');
                },
                out: function (event, ui) {
                    $(this).css('background-color', 'white');
                },
                drop: function (event, ui) {
                    rowSpanPrev = parseInt($(previd).attr('rowspan'));
                  //  rowSpanNext = parseInt($(nextid).attr('rowspan'));
                    var objPrev = document.getElementById(previd);
                //    var objNext = document.getElementById(nextid);
                    rowSpanPrev = objPrev.getAttribute('rowspan');
                //    rowSpanNext = objNext.getAttribute('rowspan');
                    if (isNaN(rowSpanPrev)) {
                        rowSpanPrev = "";
                    }
//                    if (isNaN(rowSpanNext)) {
//                        rowSpanNext = "";
//                    }
                    $(this).css('background-color', 'yellow');
                    if (rowSpanPrev == '') {
                        rowSpanPrev = 1;
                      }
                    if (!isNaN(parseInt(rowSpanPrev))) {
                        rowSpanPrev = parseInt(rowSpanPrev) + 1;
                        document.getElementById(previd).rowSpan = rowSpanPrev;
                       }
                    $(this).closest('tr').after('<tr><td>' + $(ui.draggable).clone().css('background-color', 'white').html() + '</td><td></td></tr>');
                    $(this).css('background-color', 'white');
                }
            });
            /////////////////////////////////////////////////////////
            //////////////////////////////////////////////////// For 3 rd Column Drag And Drop////////////////////////////////////////////////////
            $(".green").draggable({ helper: 'clone',
                cursor: "move",
                start: function (event, ui) {
                    $(this).css('background-color', 'yellow');
                },
                stop: function (event, ui) {
                    $(this).css('background-color', 'white');
                }
            });
            //////////////////////////////////////////
            $(".green").droppable({
                accept: ".green",
                activate: function (event, ui) {
                    $(this).position('top');
                    $(this).css('offset', 'top');
                },
                over: function (event, ui) {
                    previd = $(this).closest('td').prev().attr('id');
                    firstid = $(this).closest('td').prev().prev().attr('id');
                    $(this).css('background-color', 'yellow');
                },
                out: function (event, ui) {
                    $(this).css('background-color', 'white');
                },
                drop: function (event, ui) {
                    rowSpanPrev = parseInt($(previd).attr('rowspan'));
                    rowSpanFirst = parseInt($(firstid).attr('rowspan'));
                    var objPrev = document.getElementById(previd);
                    var objFirst = document.getElementById(firstid);
                    rowSpanPrev = objPrev.getAttribute('rowspan');
                    rowSpanFirst = objFirst.getAttribute('rowspan');
                    if (isNaN(rowSpanPrev)) {
                        rowSpanPrev = "";
                    }
                    if (isNaN(rowSpanFirst)) {
                        rowSpanFirst = "";
                    }
                    $(this).css('background-color', 'yellow');
                    if (rowSpanPrev == '' || rowSpanFirst == '') {
                        rowSpanPrev = 1;
                        rowSpanFirst = 1;
                    }
                    if (!isNaN(parseInt(rowSpanPrev)) || !isNaN(parseInt(rowSpanFirst))) {
                        rowSpanPrev = parseInt(rowSpanPrev) + 1;
                        rowSpanFirst = parseInt(rowSpanFirst) + 1;

                        document.getElementById(previd).rowSpan = rowSpanPrev;
                        document.getElementById(firstid).rowSpan = rowSpanFirst;
                    }
                    $(this).closest('tr').after('<tr><td>' + $(ui.draggable).clone().css('background-color', 'white').html() + '</td</tr>');
                    $(this).css('background-color', 'white');
                }
            });
            /////////////////////////////////////////////////////////
        });
＆＃13;
   .tbl
        {
            border: thin solid black;
        }
        
        body
        {
            font: normal 11px auto "Trebuchet MS" , Verdana, Arial, Helvetica, sans-serif;
            color: #4f6b72;
            background: #E6EAE9;
        }
        
        a
        {
            color: #c75f3e;
        }
        
        #mytable
        {
            width: 700px;
            padding: 0;
            margin: 0;
        }
        
        caption
        {
            padding: 0 0 5px 0;
            width: 700px;
            font: italic 11px "Trebuchet MS" , Verdana, Arial, Helvetica, sans-serif;
            text-align: right;
        }
        
        th
        {
            font: bold 11px "Trebuchet MS" , Verdana, Arial, Helvetica, sans-serif;
            color: #4f6b72;
            border-right: 1px solid #C1DAD7;
            border-bottom: 1px solid #C1DAD7;
            border-top: 1px solid #C1DAD7;
            letter-spacing: 2px;
            text-transform: uppercase;
            text-align: left;
            padding: 6px 6px 6px 12px;
            background: #CAE8EA url(images/bg_header.jpg) no-repeat;
        }
        
        th.nobg
        {
            border-top: 0;
            border-left: 0;
            border-right: 1px solid #C1DAD7;
            background: none;
        }
        
        td
        {
            border-right: 1px solid #C1DAD7;
            border-bottom: 1px solid #C1DAD7;
            background: #fff;
            padding: 6px 6px 6px 12px;
            color: #4f6b72;
        }
        
        td.alt
        {
            background: #F5FAFA;
            color: #797268;
        }
        
        th.spec
        {
            border-left: 1px solid #C1DAD7;
            border-top: 0;
            background: #fff url(images/bullet1.gif) no-repeat;
            font: bold 10px "Trebuchet MS" , Verdana, Arial, Helvetica, sans-serif;
        }
        
        th.specalt
        {
            border-left: 1px solid #C1DAD7;
            border-top: 0;
            background: #f5fafa url(images/bullet2.gif) no-repeat;
            font: bold 10px "Trebuchet MS" , Verdana, Arial, Helvetica, sans-serif;
            color: #797268;
        }
＆＃13;
<script src="http://code.jquery.com/jquery-1.11.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
 <table border="1" class="tbl">
        <thead>
            <tr>
                <td >
                    Name
                </td>
                <td>
                    Department
                </td>
                <td>
                    Address
                </td>
            </tr>
        </thead>
        <tbody>
            <tr class="tr" id="tr01">
                <td class="red" id="td01">
                    ABC <br/><a  id="tr01_td_01_a_p" class="ap_f"   style="text-decoration:none">+</a>&nbsp;<a  class="an_f" id="tr01_td_01_a_n" style="text-decoration:none">-</a>
                </td>
                <td class="blue" id="td02">
                    TEST1  <br/><a  id="tr01_td_02_a_p" class="ap_f"   style="text-decoration:none">+</a>&nbsp;<a  class="an_f" id="tr01_td_02_a_n" style="text-decoration:none">-</a>
                </td>
                <td class="green" id="td03">
                    IND  <br/><a  id="tr01_td_03_a_p" class="ap_f"   style="text-decoration:none">+</a>&nbsp;<a  class="an_f" id="tr01_td_03_a_n" style="text-decoration:none">-</a>
                </td>
            </tr>
            <tr class="tr" id="tr02">
                <td class="red" id="td11">
                    PQR  <br/><a  id="tr02_td_01_a_p" class="ap_f"   style="text-decoration:none">+</a>&nbsp;<a  class="an_f" id="tr02_td_01_a_n" style="text-decoration:none">-</a>
                </td>
                <td class="blue" id="td12">
                    TEST2  <br/><a  id="tr02_td_02_a_p" class="ap_f"   style="text-decoration:none">+</a>&nbsp;<a  class="an_f" id="tr02_td_02_a_n" style="text-decoration:none">-</a>
                </td>
                <td class="green" id="td13">
                    USA  <br/><a  id="tr02_td_03_a_p" class="ap_f"   style="text-decoration:none">+</a>&nbsp;<a  class="an_f" id="tr02_td_03_a_n" style="text-decoration:none">-</a>
                </td>
            </tr>
            <tr class="tr" id="tr03">
                <td class="red" id="td21">
                    LMN  <br/><a  id="tr03_td_01_a_p" class="ap_f"   style="text-decoration:none">+</a>&nbsp;<a  class="an_f" id="tr03_td_01_a_n" style="text-decoration:none">-</a>
                </td>
                <td class="blue" id="td22">
                    TEST3  <br/><a  id="tr03_td_02_a_p" class="ap_f"   style="text-decoration:none">+</a>&nbsp;<a  class="an_f" id="tr03_td_02_a_n" style="text-decoration:none">-</a>
                </td>
                <td class="green" id="td23">
                    UK  <br/><a  id="tr03_td_03_a_p" class="ap_f"   style="text-decoration:none">+</a>&nbsp;<a  class="an_f" id="tr03_td_03_a_n" style="text-decoration:none">-</a>
                </td>
            </tr>
        </tbody>
    </table>
＆＃13;
＆＃13;
＆＃13;

Fiddle