Jquery ui-sortable - no se puede colocar tr en tbody vacío

Question

Tengo dos elementos tbody conectados que me permiten arrastrar filas entre dos tablas. Todo funciona bien hasta que se eliminen todas las filas de cualquiera de las tablas.

Cuando todas las filas se han arrastrado a la otra tabla, la altura del cuerpo tónico disminuye, lo que hace (casi) imposible volver a colocar las filas en el interior.

¿Existe una solución conocida para este problema? (min-height no funciona en un elemento tbody)

Muchas gracias de antemano.

Answer 1

Lo que puede hacer es crear una fila que sea invisible para el mecanismo "clasificable". Probablemente la forma más fácil de hacerlo es con la opción "artículos".

Digamos que su HTML se parece a esto

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

Luego, en jQuery que puede tener

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

Es un poco de un truco, pero creo que si juegas un poco con variaciones de este (dale a la fila .sort-disabled cierta altura en CSS, etc.) probablemente puedas encontrar algo que funcione para ti. También podría intentar tener una fila .sort-disabled tanto primero como último, de modo que el lugar en el centro sea el destino de colocación.

Espero que esto ayude!

Answer 2

que tienen la misma pregunta, y logró resolver la mitad que al hacer esto:

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

Esto me permite mover filas a una mesa vacía, y se ve muy bien, pero el elemento se inserta después de el tbody en lugar de dentro. Creo que la respuesta de Danny Robert funcionará para mí, pero me gustaría ver una solución que no sea de pirateo.

Answer 3

Es difícil forzar la mesa esp. tbody para tener altura mientras está vacío. Entonces lo hice de la siguiente manera.

<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(); 

aspectos clave son items selector y receive controlador de eventos cuando el punto añadido se mueve en el cuerpo de la tabla.

Ahora funciona bien.

Answer 4

Pedido my post about this - se puede resolver mediante la fijación de un método para el clic que se suma a la altura de los envases vacíos:

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"); 
     } 
    }); 

} 

Algo por el estilo?

Answer 5

Así es como he resuelto el problema de ser incapaz de soltar un pad en un tbody vacío:

$(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

Sé que esta pregunta se ha marcado como "respondí" pero también quería añadir otra manera de acercarse esta.

Lo que hago es verificar si la lista está vacía, si es así, crear un nuevo elemento de fila e insertarlo en el tbody. Puse un mensaje como "No más artículos" en el td.

Una vez que un elemento se coloca en la lista "vacía", el mensaje vacío se destruirá.

Uso Mootools, por lo tanto, la falta de código de ejemplo.

Answer 7

que utilizo:

$(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> 

Más detalles e incluso un código mejor en 012.https://devstuffs.wordpress.com/2015/07/31/jquery-ui-sortable-with-connected-tables-and-empty-rows/

Answer 9

solución fácil (CSS puro):

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

Si el espacio en blanco no es un espacio en blanco stardard. Es un carácter en blanco invisible como el siguiente: Invisible characters - ASCII

Funcionó para mí en FF y Chrome.