Question

我有一些类似于下面的标记，我试图隐藏“some_row”TR。

<div id="sortable">
<table>
    <tr><td>Some Title 1</td></tr>
    <tr class="some_row"><td><textarea ...></td><tr>
</table>    
<table>
    <tr><td>Some Title 2</td></tr>
    <tr class="some_row"><td><textarea ...></td><tr>
</table>
</div>

以下是我的尝试：

$(function () {
    $("#sortable")
    .sortable({
        helper: function (e, o) {
            o.find("#some_row").hide();
            return o;
        },
        start: function () {
            $(".some_row").hide();
        },
        stop: function () {
            $(".some_row").show();
        }
    })
    .disableSelection();
});

最初我刚开始只有start和stop个事件，然后我添加helper，因为我猜的是克隆的选定行，有一个隐藏的some_row div但是相同高度。

无论如何，上述功能完美无缺，但看起来小部件仍然考虑到周围div的原始高度。

我能做些什么来挽救这个想法吗？

Answer 1

在返回帮助程序之前，您需要在 .somerow 上调用隐藏。

帮助程序是原始div的克隆以及您看到的被拖动的内容。因此，当您隐藏行时，已经创建了克隆。

完成启动后运行的刷新以重新加载可排序对象以调整新高度。

Fiddle Example

$(function () {
$("#sortable")
.sortable({
    cursor: 'move',
    cursorAt: { left: 0, top: 10 },
    helper: function (e, o) {
        $(".some_row").hide();
        o.find("#some_row").hide();
        return o;
    },
    start: function () {
        $( "#sortable" ).sortable( "refresh" );
    },
    stop: function () {
        $(".some_row").show();
    }
})
.disableSelection();
});

此外，您可以在拖动时定义光标位置（相对于帮助程序）以及使用jqueryui sortable api的cursor和cursorAt选项悬停时显示的光标类型

隐藏div jquery可排序小部件的一部分

1 个答案: