Question

我尝试了所有我知道的解决这个问题，但没有成功。我的网站完全在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中，表格的第一行变得很大（为什么????）。

你能帮助我解决这些可能性中的一个（或两个）：

找到另一种方法，使源背景为紫色，
找到“扩大第一行”的问题-glitch。

非常感谢，迈克尔

Answer 1

请改用此行：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上测试

Answer 2

您说明的要求是：

找到另一种方法，使源背景为紫色，
找到“扩大第一行”的问题-glitch。

小提琴解决方案：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;}

现在没有发生如此大的拖延行为。

我希望你能采用这种解决方案，我猜这会对你有帮助。

Answer 3

在Chrome 24中适用于我。您使用的是哪个版本的Chrome？您是否可以升级到最新版本的chrome并告诉我您是否遇到此问题？

Chrome中的jQuery draggable helper故障

3 个答案: