JQuery complex Drag n Drop - как добавить похожие значения столбцов с заголовками в разные таблицы

Question

У меня есть требование, где я должен удалить одну строку из таблицы в строку другой таблицы. Во время удаления некоторые из исходных столбцов должны быть добавлены в цель. Пример:

Исходная таблица имеет column Id, Number of Bundles, Number of tags а также Target has Id, Number of Bundles, Number of tags

В приведенном выше примере при добавлении строки источника на строку назначения, как я могу добавить Number of Bundles значения столбца и Number of Tags значения столбца отдельно?

Я дошел до перетаскивания и сложения значений, если есть только один столбец в строке. Ценю любую помощь. Я очень новичок в JQuery.

код сценария ниже (я не знаю, как добавить HTML-код здесь):

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

Я сделал это сам, забыл обновить это. Я использовал JQuery UI, перетаскиваемый и сбрасываемый вместе с AJAX. В пользовательском интерфейсе контейнер div для изображения, #imgHolder и в функции сценария droppable выполняются все бизнес-правила (вычисления) AJAX, а также обновление диаграммы. Пожалуйста, дайте мне знать, если вам нужна дополнительная информация по этому вопросу.

псевдокод:

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+'" />');

}