Jquery ui-sortable - 无法将tr放在空的tbody中

Question

Jquery ui-sortable - 无法将tr放在空的tbody中

jqueryhtmljquery-uiuser-interfacejquery-ui-sortable

24

我有两个相互连接的tbody元素，可以让我在两个表格之间拖动行。一切正常，直到其中一个表格中的所有行都被删除。

当所有行都被拖到另一个表格中时，tbody的高度会减小，使得很难再将行放回去。

是否有已知的解决此问题的方法？（min-height在tbody元素上不起作用）

非常感谢您的帮助。

- user210437

好问题，我正在尝试对行进行排序和移动列表，并且在空表格上遇到了相同的问题...你有进一步的解决方法吗？ - Mark Redman

解决方案在这里：https://dev59.com/Amw15IYBdhLWcg3wGn5c摘要：向容器添加填充。 - Populus

12个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- orenishi · Answer 1

我解决了这个问题，基本上是复制了jqueryui sortable演示中心的代码，我发现他们在空列表中添加了5像素的填充。

https://jqueryui.com/sortable/#empty-lists

我添加了1像素的填充，肉眼可能不太能察觉，但足以启用拖放区域占位符触发器，从而使我可以放置。

- Meloman · Answer 2

根据Ismael Miguel对Cetnar答案的评论，这是我的工作解决方案。

我为每个表格发送不同的ajax调用（紧急、普通、低优先级任务），并且在空表格删除时可以正常工作。
在数据库中，我使用一个sorting列更新由ajax发送的数组中存在的所有任务。

jQuery 代码：

$('.draggable-zone').sortable({
    items:       'tr.draggable',
    helper:      'clone',
    appendTo:    'body',
    connectWith: '.draggable-zone',
    update: function(e, ui) {
        $.ajax({
            url:  '/inve/new/sort', 
            type: 'POST',
            data: $(this).sortable('serialize', { 
                key: $(this).attr('data-partl')
            })
        });
    },
    receive: function(e, ui) {
        var $parent = ui.item.parent(); 
        if($parent.is('table')){
            $parent.find('tbody').append(ui.item);
        }
    }
});

HTML / Smarty模板（仅限1个表）：

<table class="table table-striped table-hover table-bordered draggable-zone" data-partl="normal[]">
    <tbody>
        {foreach $data.normal as $task}
            <tr class="draggable" id="sort_{$task.id}">
                <td><b>{$task.title}</b></td>
                ...
            </tr>
        {/foreach}
    </body>
</table>
...