使用 jQuery 将内容从一个表拖放到另一个表 [英] Drag and drop contents from one table to another using jQuery

问题描述

也许这很简单，但我无法做到这一点.

Maybe it is something simple but I cannot get this right.

我有一个包含数据的表格，例如 4 列和 4 行.我想将此表中的数据项输入到另一个具有相同维度的表中，但每个单元格都有一个 id，我用它来将数据保存到数据库中.目前我正在将表中的数据手动输入到第二个表中，这很耗时，因为我必须经常这样做.

I have a table with data, say, 4 columns and 4 rows. I want to enter the data items from this table into another table which has the same dimensions but each cell has an id which I use to save the data to a database. Currently I am entering the data from the table manually into the second table, which is time consuming because I have to do that often.

我相信使用拖放是可能的.我正在使用 kendoui，它具有拖放功能，但我根本无法弄清楚如何使用 kendoui 进行操作以及这是否可能.

I believe that it can be possible by using drag and drop. I am using kendoui, which has drag and drop functionality but I simply cannot figure out how to do it with kendoui and whether that is possible.

这是可以相对简单地完成的事情吗(有或没有 kendoui)?如果是这样，谁能给我一些关于如何处理它的指示?

Is this something that can be done relatively simple (with or without kendoui)? If so, can anyone give me some pointers on how to approach it?

推荐答案

如果您搜索此站点，您可能会得到解决方案.无论如何，我在这个网站上发现了一些东西，但不记得实际帖子的链接.无论如何:

If you search this site probably you would get the solution. Anyways I found something following on this website but don't remember the link to actual post. Anyways :

$(document).ready(function() {
$tabs = $(".tabbable");

$('.nav-tabs a').click(function(e) {
    e.preventDefault();
    $(this).tab('show');
})

$( "tbody.connectedSortable" )
    .sortable({
        connectWith: ".connectedSortable",
        items: "> tr:not(:first)",
        appendTo: $tabs,
        helper:"clone",
        zIndex: 999990,
        start: function(){ $tabs.addClass("dragging") },
        stop: function(){ $tabs.removeClass("dragging") }
    })
    .disableSelection()
;

var $tab_items = $( ".nav-tabs > li", $tabs ).droppable({
  accept: ".connectedSortable tr",
  hoverClass: "ui-state-hover",
  over: function( event, ui ) {
    var $item = $( this );
    $item.find("a").tab("show");

  },
  drop: function( event, ui ) {
    return false;
  }
});

});

在 jsfiddle 上试试这个 http://jsfiddle.net/martyk/Kzf62/18/

try this on jsfiddle http://jsfiddle.net/martyk/Kzf62/18/

这篇关于使用 jQuery 将内容从一个表拖放到另一个表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！