带有 jQuery UI 可排序的自定义助手答案

【问题标题】：Custom Helper with jQuery UI Sortable带有 jQuery UI 可排序的自定义助手
【发布时间】：2012-08-21 21:34:11
【问题描述】：

我使用 jQuery UI 可排序组件创建了一个自定义帮助器元素。

$(function() {
    $("#sortable").sortable({
        placeholder: "ui-state-highlight",
        helper: function() {
            return $('<tr style="background-color:Fuscia"><td colspan="5" ><table><tr><td class="ui-state-default" style="background-color:Red">[XXXXXXXXXXXX]</td></tr><tr><td colspan="5" class="ui-state-default" style="background-color:Red">[XXXXXXXXXXXX]</td></tr></table></td></tr>');
        },
    });
    $("#sortable").disableSelection();
});

当我拖动一个项目时，自定义元素确实会出现。但是，它会溢出“拖动框”，该“拖动框”显然是被拖动内容的容器。

我已经在http://jsfiddle.net/LpyXh/ 发布了我的代码和标记。

谁能看到我错过了什么？

【问题讨论】：

所以你只是想摆脱包含元素，所以你看到的只是带有 Xs 的红色框吗？
是的，或者至少，使包含元素足够大以包围红色框。

标签： jquery html jquery-ui jquery-ui-sortable

【解决方案1】：

在 CSS 中添加

.ui-sortable-helper
{
   background:none;    
   border:none;   
}

http://jsfiddle.net/LpyXh/2/

【讨论】：

是的，这是可能的。仍在测试中。

【解决方案2】：

您指定了每个 tr 的高度，该高度将应用于帮助器。

http://jsfiddle.net/LpyXh/3/

将修复容器。

【讨论】：

嗯...我实际上很难看到您更改它的确切位置。我已经将您的代码与我的代码进行了比较，但错过了它。我在哪里设置每个 tr 的高度而你的代码没有？