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

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 上调用 hide。

助手是原始 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 选项定义拖动时的光标位置(相对于助手)和悬停时显示的光标类型