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 draggable＆amp;可以与AJAX一起使用。在UI中，图像的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+'" />');

}

JQuery complex Drag-Drop - 如何在不同的表中添加类似的标题列值

1 个答案: