Question

如果你想看看发生了什么，这是我的JSfiddle：

我在初始加载时看起来像这样：

<table class="sorted_table">
  <thead>
    ...
  </thead>
  <tbody>
    <tr id="1" class="homepage-slide-data admin-homepage-slide-list">...</tr>
    <tr id="2" class="homepage-slide-data admin-homepage-slide-list">...</tr>
  </tbody>
</table>

注意我有两个<tr>...</tr> s

没问题。但是，如果我将顶部（tr＃1）拖到底部，并尝试将新顶部（现在从订单切换后的tr＃2）拖到底部，它将停止工作。我检查了HTML，看起来多次拖动顶部到底部会做两件（不需要的）事情：

占位符位于底部，不再更新/移动。
如果您打开firebug并观看html，您会看到</tbody>被推高，以致<tr>不再被<tbody>...</tbody>包围：
＃... ...

这是我用于自定义jquery sortable的JS：

$('.sorted_table').sortable({
    containerSelector: 'table',
    itemPath: '> tbody',
    itemSelector: 'tr.admin-homepage-slide-list',
    placeholder: '<li class="placeholder"/>', #<-- I tried tr instead of li too, same result
    pullPlaceholder: true,
    onDrop: function () {
        var id_list = new Array();
        $('.sorted_table tr.homepage-slide-data').each(function(index) {
            id_list[index] = $(this).attr("id");
        });
        jQuery.ajax({
            url: '/admin/homepage_slides/update_order',
            type: 'POST',
            data: {"new_order": id_list},
            dataType: 'script'
        });
    }
})

P.S。我愿意尝试其他插件。如果您对表行排序有类似功能，请告诉我。

Answer 1

我最终切换到：http://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/

jQuery Sortable让我摆脱了困境？

1 个答案: