Question

I have a requirement where I have to drop one row from a table to another table’s row. During the drop some of the source columns should get added in the target.
Example:

Source table has a column Id, Number of Bundles, Number of tags and Target has Id, Number of Bundles, Number of tags

In the above example when dropping the source row on target row, how can I add Number of Bundles column values and Number of Tags column values separately?

I have reached up to dragging and dropping and adding up the values if there are only one column in a row. Appreciate any help. I’m very new to JQuery.

script code below (I don’t know how to add the html code here):

source.draggable({
    revert: true,
    opacity: .75,
    containment: '.container',
    cursor: 'move',
        cursorAt: { top: 35, left: 45 },
    helper: function(event) {
        return $('<div class="drag-row"><table></table></div>')
            .find('table').append($(event.target).closest('tr').clone()).end();
    },
    appendTo: 'body'
});

target.droppable({
    drop: function(event, ui) {
        var classid = ui.helper.find('tr').attr('Number of Bundles');
        var name = ui.helper.find('.name').html();
        $(this).addClass('drophighlight')
                                .find('td')
                    .html(($(this).find('td').text()*1) + (ui.draggable.children("td").text() *1));


        //$(this).addClass('drophighlight')
                    //          .find('td')
                    //.html(ui.draggable.children("td").text()*1);
        //alert('row dropped ' + ui.draggable.children("td").text());
    },
    accept: source.selector
});

<div class="tcontainer">
      <table width="90%" border="1" id="t1">
        <caption>
          Source
        </caption>
        <tr>
          <th scope="col">Team</th>  
          <th scope="col">Number of Bundles</th>
          <th scope="col">Number of Orders</th>
          <th scope="col">Number of Shipping Tags</th>
        </tr>
        <tr>
          <td class="team">1</td>  
          <td class="bundle">100</td>
          <td class="name">9</td>
          <td class="name">15</td>
        </tr>
        <tr>
          <td class="team">2</td>  
          <td class="bundle">800</td>
          <td class="name">15</td>
          <td class="name">30</td>
        </tr>
        <tr>
          <td class="team">3</td>  
          <td class="bundle">550</td>
          <td class="name">11</td>
          <td class="name">26</td>
        </tr>
      </table>
    </div>
    <div class="tcontainer">
      <table width="90%" border="1" id="t2">
        <caption>Target</caption>
        <tr>
          <th scope="col">Team</th>  
          <th scope="col">Number of Bundles</th>
          <th scope="col">Number of Orders</th>
          <th scope="col">Number of Shipping Tags</th>
        </tr>
        <tr>
          <td class="team">1</td>  
          <td class="bundle">500</td>
          <td class="name">29</td>
          <td class="name">53</td>
        </tr>
      </table>
    </div>

Answer 1

I did it myself, forgot to update this. I used JQuery UI draggable & droppable along with AJAX. In the UI a div container for image, #imgHolder and in the droppable script function all business rules (calculations) AJAX is done and also a chart refresh. Please let me know if you need more info on this.

pseudo code:

target.droppable({
    drop : function(event, ui) {
//place your business rules (AJAX)
refreshImage();
},
    accept : source.selector        
});

function refreshImage() {
d = new Date();
var url = "/scar-inception/piechart/drawPie"+d.getTime();
//set the DIV to the img tag 
$('#imgHolder').html('<img src="'+url+'" />');

}