1

2つのテーブル間でn個のドロップ行をドラッグしようとしています。最初のテーブルには3つの列があり、2番目のテーブルには4つの列があります。ドラッグアンドドロップが機能しています。

私が見たすべての例は、一般的にドロップされた場所でappendToです。ドラッグした行の内容を置き換え、ドロップした場所のセルを置き換え/更新します。

新しいtablerow（..）を記述してから、現在削除されている行を削除して、生成された行に置き換えることができるかどうかを考えていました。または、新しい場所の列を更新するだけかもしれません。

(function ($) {
  $(document).ready(function () {
    var tb1 = $("#table1 tr");
    var tb2 = $("#table2 tr");
    tb1.draggable({
      appendTo: "body",
      helper: "clone",
      opacity: "0.35",
      revert: "invalid"
    });
    tb2.droppable({
      accept: '#table1 tr',
      tolerance: "pointer",
      drop: function (event, ui) {
        //loop through all items in the row
        var $col1, $col2;
        tb1.each(function () {
          $col1 = $("span:eq(0)", this).text();
          $col2 = $("span:eq(1)", this).text();
        });
        $droppedRow = $(this).children('td');
        var $destCol1 = $droppedRow.find('span')[0].innerHTML;
        var $destCol2 = $droppedRow.find('span')[1].innerHTML;
        var $row = "<tr><td>" & $destCol1 & "</td><td>" & $destCol2 & "</td><td>" & $col1 & "</td><td>" & $col2 & "</td></tr>";

      }

http://jsfiddle.net/S2yC2/7/

続行する方法の提案。ありがとう

4

1 に答える 1

2

私はあなたがこれをやろうとしていると思います：http：//jsfiddle.net/S2yC2/15/

  drop: function (event, ui) {

    //Retrieve relevant data of the dragged line
    var $draggedCol = $(ui.draggable).children('td');
    var col1 = $($draggedCol[0]).html();
    var col2 = $($draggedCol[1]).html();      

    //Assign data to the void cell of the dropped line
    var $droppedRow = $(this).children('td');
    $($droppedRow[2]).html(col1);
    $($droppedRow[3]).html(col2);

  }
于 2013-01-06T20:39:50.060 に答える