使用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，该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屋！