2

我尝试了我所知道的一切来解决这个问题，但没有成功。我的网站完全在 IE 和 FF 中运行。在 Chrome 中有一个小故障 - 没有理由。

我有两张桌子。一个源表和一个目标表。我正在将表行 (tr) 从源拖到目标或在目标表内。当我开始拖动该行时，它被一个自制的助手克隆以自由拖动它。

helper: function(event){
/* HERE IS THE PROBLEM */
   return $('<div class="dragged-row"><table></table></div>')
          .find('table').append($(event.target).closest('tr').clone().addClass("dragged-row")).end();
},

（我从网上得到这个代码）

当我改用助手“克隆”时，问题就消失了，但我的课程没有应用（紫色背景色）。

我在http://jsfiddle.net/jt3LX/上创建了一个最小化的示例

您可以拖动一行。如果你开始拖动，两条线都会变成紫色（这是需要的）。但是在 chrome 中，表格的第一行变得越来越大（为什么？？？？）。

您能否帮助我解决以下一种（或两种）可能性：

  • 找到另一种方法使源的背景为紫色，
  • 找出“第一行变大”的问题——故障。

非常感谢，迈克尔

4

3 回答 3

0

请改用此行：return $(this).addClass("dragged-row").clone();

http://jsfiddle.net/jt3LX/2/

    $(".drag tr").not(".tableHead").draggable({
        helper: function(event){
            /* HERE IS THE PROBLEM */
            return $(this).addClass("dragged-row").clone();
        },
        start: function(event, ui){
            $(this).css("background-color", "#aaaaff");

            c.tr = this;
            c.helper = ui.helper;
        },
        stop: function(event, ui){
            $(this).css("background-color", '');

            c.tr = null;
            c.helper = null;
        }
    });

在 FF、IE9 和 Chrome 上测试

于 2012-11-28T11:41:07.457 回答
0

你说的要求是：

  • 找到另一种方法使源的背景为紫色，
  • 找出“第一行变大”的问题——故障。

小提琴解决方案：http: //jsfiddle.net/jt3LX/6/

对于你的第一点i am guessing，你want to make background color of purple when drop happens.

所以你必须在这部分代码做：

stop: function(event, ui){
            $(this).css("background-color", '#aaaaff'); // give purple color code here

            c.tr = null;
            c.helper = null;
        }

并且最大的问题是我看到您没有为表格指定宽度，这使得在执行拖动和克隆进入图片时宽度达到最大。

所以为此我只是给表格一些宽度：

.main, .dropTable{position:relative; width:606px;}

现在没有发生如此大的拖拽tr。

我希望你在寻求这种解决方案，我猜这会对你有所帮助。

于 2012-11-28T13:10:47.327 回答
0

我在 Chrome 24 中运行良好。您使用的是哪个版本的 chrome？您可以升级到最新版本的 chrome 并让我知道您是否遇到问题？

于 2013-01-17T05:27:33.683 回答