JQueryの複合ドラッグnドロップ - 異なる表に同じキャプションの列の値を追加する方法

Question

テーブルから別のテーブルの行に1行をドロップする必要があるという要件があります。ドロップ中に、いくつかのソース列がターゲットに追加されます。 例：

ソーステーブルが有するcolumn Id、Number of Bundles、Number of tagsとTarget has Id、Number of Bundles、Iは、Number of Bundles列値とNumber of Tags列の値を追加する方法上記の例ではNumber of tags

ターゲット行のソース行を落とし、別々に？

行に列が1つしかない場合は、ドラッグアンドドロップして値を加算するまでになりました。助けをお待ちしています。私は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

私は、自分自身をそれをしなかったが、これを更新することを忘れていました。私は、AJAXと一緒にdrapableを使用して、drackableを使用した&のJQueryを使用しました。 UIでは、画像用のdivコンテナ、#imgHolder、およびドロップ可能なスクリプト関数では、すべてのビジネスルール（計算）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+'" />'); 

}