在两个表之间拖动n

本文介绍了在两个表之间拖动n的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在尝试在两个表之间拖动n个拖放行.第一个表有3列，第二个表有4列.我有拖拽工作.

I m trying to drag n drop rows between two tables. First table has 3 columns and the second table has 4 columns. I have the drag n drop working.

我看到的所有示例通常都位于放置位置的appendTo处.我想做的是替换拖动行的内容，并替换/更新放置位置中的单元格.

All the examples I have seen generally appendTo at the dropped location. What I would like to do is replace the contents of the dragged row and replace/update the cells in the dropped location.

我在考虑是否可以编写一个新的tablerow(..)，然后删除当前删除的行，并将其替换为生成的行.也许只是更新新位置中的列.

I was thinking if I can maybe write a new tablerow( ..) and then remove the current dropped row and replace it with the generated row. Or maybe just update the columns in the new location.

(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>"; }

jsfiddle/S2yC2/7/

任何建议如何进行. 谢谢

Any suggestions how to proceed. thanks

推荐答案

我认为您正在尝试这样做: jsfiddle/S2yC2/15/

I think you are trying to do this : jsfiddle/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); }