问题描述
我正在尝试在两个表之间拖动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>";
}
任何建议如何进行.谢谢
Any suggestions how to proceed.thanks
推荐答案
我认为您正在尝试这样做: http://jsfiddle.net/S2yC2/15/
I think you are trying to do this : 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);
}
这篇关于在两个表之间拖动n的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!