Question

我有两个连接的tbody元素，允许我在两个表之间拖动行。一切正常，直到从任一表中删除所有行。

当所有行都被拖动到另一个表时，tbody高度会降低，因此（几乎）不可能将行放回内部。

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

非常感谢提前。

Answer 1

您可以做的是创建一个对“可排序”机制不可见的行。可能最简单的方法是使用“items”选项。

假设您的HTML看起来像这样

<tbody class="sortable">
    <tr><td>stuff</td></tr>
    <tr><td>stuff</td></tr>
    <tr><td>stuff</td></tr>
    <tr class="sort-disabled"><td></td></tr>
</tbody>

然后在jquery中你可以拥有

$('.sortable').sortable({
    items: ">*:not(.sort-disabled)"
});

这有点像黑客攻击，但我认为如果你玩这种变体（在CSS中给.sort-disabled行一些高度等等）你可能会找到适合你的东西。你也可以尝试在第一个和最后一个都使用.sort-disabled行，这样中间的位置就是放置目标。

希望这有帮助！

Answer 2

强制表esp很难。它是空的，有高度。所以我按照以下方式做到了。

<div class="ui-widget sortablecolumn">
   <table>
   </table>
</div>  

$( '.sortablecolumn').sortable(
{
   connectWith: '.sortablecolumn',
   items: 'table > tbody > *',
   receive: function(ev, ui) {
        ui.item.parent().find('table > tbody').append(ui.item);
   }
});
$( '.sortablecolumn' ).disableSelection();

关键方面是items选择器和receive事件处理程序，其中添加的项目被移动到表体中。

现在工作正常。

Answer 3

Checkout my post about this - 你可以通过在点击上添加一个方法来解决这个问题，这会增加空容器的高度：

function sortAndDrag() {

    //show BEFORE sortable starts
     $(".sortableClass").bind('click mousedown', function(){
          $(".sortableClass"").each(function (c) {
                if ($("tbody", this).size() == 0) {
                    $(this).addClass("aClassWhichGivesHeight")
                }
            })
     });

    //enable sortable
    $(".sortableClass").sortable({
        connectWith: ".sortableClass",
        stop: function (a, d) {
            $("tbody").removeClass("aClassWhichGivesHeight");
        }
    });

}

那样的东西？

Answer 4

我有同样的问题，并通过这样做成功解决了一半：

$('table').sortable(
{
    connectWith: 'table',
    items: 'tbody tr'
});

这允许我将行移到空表上，看起来很好，但是在 tbody之后而不是在其中插入元素。我认为Danny Robert的回答对我有用，但我有兴趣看到非黑客解决方案。

Answer 5

以下是我如何解决这个问题，因为我无法在一个空的tbody中删除tr：

$(function() {

    var sort1 = $('#sort1 tbody');
    var sort2 = $('#sort2 tbody');

   sizeCheck(sort1);
   sizeCheck(sort2);

   //Start the jQuery Sortable for Active and Fresh Promo Tables
   $("#sort1 tbody, #sort2 tbody").sortable({

     items: ">*:not(.sort-disabled)",

     deactivate: function(e, ui) {

        sizeCheck(sort1);
        sizeCheck(sort2);

     },
     //Connect tables to pass data
     connectWith: ".contentTable tbody"

   }).disableSelection();

});

//Prevent empty tbody from not allowing items dragged into it

function sizeCheck(item){
    if($(item).height() == 0){
        $(item).append('<tr class="sort-disabled"><td></td></tr>');
    }
}

Answer 6

我知道这个问题已被标记为“已回答”，但我还想添加另一种解决方法。

我做的是检查列表是否为空，如果是，则创建一个新的行元素并将其注入到tbody中。我在td中添加了“没有更多项目”的消息。

将项目放入“空”列表后，空消息将被销毁。

我使用Mootools因此缺少示例代码。

Answer 7

我用：

$(document).ready(function(){
      $( "#sortable1 tbody, #sortable2 tbody" ).sortable({
      connectWith: ".connectedSortable",
      remove: function(event, ui){ if($(this).html().replace(/^\s+/, "") == '') { $(this).html('<tr class="tmp_tr nobr"><td colspan="7">&nbsp;</td></tr>'); }},
      update: function( event, ui ) {$(this).find('.tmp_tr').remove();},
    }).disableSelection();

}）;

Answer 8

<强> JS

$(".sortable").sortable({
    items: 'tbody > tr',
    connectWith: ".sortable"
});

<强> CSS

.sortable {
    background-color: silver;    
    height: 10px;
}

.sortable td { background-color: white; }

<强> HTML

<table class='sortable'>    
    <tbody>
        <tr><td colspan="2" class="drop-row" style="display: none;"></td></tr>
    </tbody>    
</table>

更多细节，甚至是更好的代码 https://devstuffs.wordpress.com/2015/07/31/jquery-ui-sortable-with-connected-tables-and-empty-rows/

Answer 9

简易解决方案（PURE CSS）：

tbody:after {
    content:" ";
    height:30px;
}

空白区域不是标准空格。它是一个看不见的空白字符，如下所示： Invisible characters - ASCII

在FF和Chrome中为我工作。

Answer 10

就我而言，它是关于 table 和 tbody 在没有项目时折叠到 0x0 大小。有效的是为 table 和 tbody 提供一些最小尺寸，如下所示：

table.items-table {
    width: 100%; /*needed for dropping on empty table to work - can be any non-zero value*/
}

table.items-table >tbody { /*needed for dropping on empty table to work */
    display: block;
    min-height: 10px;
}

这就是所需要的。

Answer 11

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

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

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>
...

Jquery ui-sortable - 无法删除tr in empty tbody

11 个答案: