Jquery ui-sortierbar - nicht in der Lage, tr in leeren tbody fallen lassen

Question

Ich habe zwei verbundene tbody Elemente, die mir erlauben, Zeilen zwischen zwei Tabellen zu ziehen. Alles funktioniert gut, bis alle Zeilen aus jeder Tabelle entfernt sind.

Wenn alle Zeilen auf die andere Tabelle gezogen wurden, verringert sich die Tbody-Höhe und es ist (fast) unmöglich, die Zeilen wieder nach innen fallen zu lassen.

Gibt es eine bekannte Problemumgehung für dieses Problem? (min-height funktioniert nicht auf einem tbody element)

Vielen Dank im Voraus.

Answer 1

Sie können eine Zeile erstellen, die für den "sortierbaren" Mechanismus unsichtbar ist. Wahrscheinlich ist der einfachste Weg, dies zu tun, mit der Option "Artikel".

Lassen Sie uns sagen, dass Ihre HTML-ähnliche

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

dann in jquery aussieht, kann man

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

Es ist ein bisschen wie ein Hack, aber ich denke, wenn man sich mit Variationen dieses Spiels (geben Sie der .sort-disabled Zeile eine Höhe in CSS usw.) Sie können wahrscheinlich etwas finden, das für Sie arbeitet. Sie können auch versuchen, eine .sort-deaktivierte Zeile sowohl als erste als auch als letzte Zeile zu verwenden, sodass der Platz in der Mitte das Drop-Ziel ist.

Hoffe, das hilft!

Answer 2

Ich habe die gleiche Frage, und verwalten die Hälfte es dadurch zu lösen, dies zu tun:

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

Dies ermöglicht es mir Reihen auf einen leeren Tisch zu bewegen, und es sieht gut aus, aber das Element eingefügt nach der tbody statt drinnen. Ich denke, Danny Roberts Antwort wird für mich funktionieren, aber ich wäre daran interessiert, eine Non-Hack-Lösung zu sehen.

Answer 3

Es ist schwer, Tabelle zu erzwingen. tbody, um Höhe zu haben, während es leer ist. Also habe ich es auf folgende Weise gemacht.

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

Schwerpunkte sind items Selektor und receive Ereignishandler, wo hinzugefügt Artikel in Tabellenkörper bewegt wird.

Jetzt funktioniert es gut.

Answer 4

Kasse my post about this - Sie können es lösen, indem ein Verfahren zum Klick verbunden sind, die Höhe zu leeren Behältern ergänzt:

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

} 

So etwas wie das?

Answer 5

Hier ist, wie ich das Problem gelöst mit nicht in der Lage eine tr in einem leeren tbody fallen zu lassen:

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

Ich weiß, diese Frage markiert wurde als „beantwortet“ aber ich wollte auch eine andere Art und Weise hinzuzufügen, zu nähern Dies.

Ich überprüfe, ob die Liste leer ist, wenn ja, erstelle ein neues Zeilenelement und injiziere es in den tbody. Ich habe eine Nachricht wie "Keine weiteren Gegenstände" in der td.

Sobald ein Element in die "leere" Liste fällt, wird die leere Nachricht zerstört.

Ich benutze Mootools daher das Fehlen von Beispielcode.

Answer 7

i verwenden:

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

Mehr Details und sogar einen besseren Code bei 012.https://devstuffs.wordpress.com/2015/07/31/jquery-ui-sortable-with-connected-tables-and-empty-rows/

Answer 9

Einfache Lösung (PURE CSS):

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

Wenn der leere Raum kein stardard Leerzeichen ist. Es ist ein unsichtbares Leerzeichen wie das Folgende: Invisible characters - ASCII

Arbeitete für mich in FF und Chrome.