在两个表之间拖放

Posted 2023-03-13

【中文标题】在两个表之间拖放

【英文标题】：drag n drop between two tables

【发布时间】：2013-01-06 20:13:22

【问题描述】：

我正在尝试 n 行。第一个表有 3 列，第二个表有 4 列。我有拖放工作。

我看到的所有示例通常都在放置的位置附加到。我想做的是替换拖动行的内容并替换/更新放置位置的单元格。

我在想是否可以编写一个新的 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/

任何建议如何进行。 谢谢

【参考方案1】：

我认为您正在尝试这样做：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);

  

【讨论】：

感谢@sdedpont 正是我一直在寻找的东西.. 你是救生员.. :)