Verhindern, dass Listenelement in JqueryUI sortierbar ist

Ich habe zwei Listen #sortable1 und #sortable 2 die verbundene Sortables sind, wie hier gezeigt Beispiel.

Sie können Listenelemente per Drag-and-Drop verschieben sortable1 zu sortable 2. Wenn jedoch ein Artikel in sortierbar 1 die Klasse “Nummer” enthält, möchte ich verhindern der Tropfen auf Sortierbar2 und so das gezogene Element wieder hineinfallen lassen sortierbar 1.

Ich habe Folgendes auf sortable2 verwendet:

receive: function (event, ui) {
            if ($(ui.item).hasClass("number")) {
                $(ui.item).remove();
            }

aber es löscht das Listenelement aus beiden Tabellen insgesamt. Jede Hilfe wird geschätzt.

Für jeden, der dies in Zukunft liest, wird, wie von Briansol in Kommentaren für die akzeptierte Antwort erwähnt, ein Fehler ausgegeben

Uncaught TypeError: Cannot read property 'removeChild' of null

Das sagt die Dokumentation besonders

cancel()

Bricht eine Änderung an der aktuellen Sortierung ab und setzt sie auf den Zustand vor dem Start der aktuellen Sortierung zurück. Nützlich in der Pause und erhalten Callback-Funktionen.

Das Abbrechen der Sortierung während anderer Ereignisse ist unzuverlässig. Verwenden Sie daher besser die receive Ereignis wie in Mj Azanis Antwort gezeigt oder verwenden Sie die stop Veranstaltung wie folgt:

$('#list1').sortable({
  connectWith: 'ul',
  stop: function(ev, ui) {
    if(ui.item.hasClass("number"))
      $(this).sortable("cancel");
   }
}); 

$('#list2').sortable({
   connectWith: 'ul',
});  

Demo

Sie können eine Kombination aus den verwenden stop und sortable('cancel') Methoden zur Validierung des verschobenen Elements. Im dieses Beispielwenn ein Gegenstand abgelegt wird, überprüfe ich, ob der Gegenstand gültig ist, indem ich:

1. Überprüfen, ob das Element die Klasse hat number
2. und Überprüfen, ob das Listenelement abgelegt wurde list2

Dies ist etwas fester codiert, als ich möchte. Alternativ können Sie also das übergeordnete Element des abgelegten Elements überprüfen this, um zu prüfen, ob die Listen unterschiedlich sind. Dies bedeutet, dass Sie möglicherweise einen Artikel von haben könnten number in list1 und list2aber sie sind nicht austauschbar.

jsFiddle-Beispiel

$(function() {
    $('ul').sortable({
        connectWith: 'ul',
        stop: function(ev, ui) {
            if ($(ui.item).hasClass('number') && $(ui.placeholder).parent()[0] != this) {
                $(this).sortable('cancel');
            }
        }
    });        
});​

Versuchen dieses Beispiel

$('#list1').sortable({
    connectWith: 'ul'
});    

$('#list2').sortable({
    connectWith: 'ul',
    receive: function(ev, ui) {
        if(ui.item.hasClass("number"))
          ui.sender.sortable("cancel");
    }
});    

Nach ein paar Experimenten habe ich festgestellt, dass die bei weitem einfachste Methode die Verwendung des remove-Ereignisses ist, das im Wesentlichen nur ausgelöst wird, wenn Sie versuchen, ein Element in eine neue sortierbare Datei zu verschieben (die zuvor mit connectWith als Ziel verfügbar gemacht wurde).

Fügen Sie dies einfach zu Ihrem sortierbaren Aufruf hinzu:

remove:function(e,ui) {
    if(ui.item.hasClass('your_restricted_classname')) return false;
},

Wenn Sie die Elemente mit der Klasse “Nummer” überhaupt nicht ziehen können müssen, können Sie die gesamte Drag-and-Drop-Funktionalität auch auf Elemente beschränken, die nicht die Klasse “Nummer” haben:

$("#sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable",
    items: "li:not(.number)"
});

Hier kannst du es ausprobieren: http://jsfiddle.net/60gwjsgb/1/

beforeStop: function(ev, ui) {
                if ($(ui.item).hasClass('number') && 
                    $(ui.placeholder).parent()[0] != this) {
                    $(this).sortable('cancel');
                }
            }

Versuche dies.

Wenn Sie a) nur diese 2 Listen haben und b) es Ihnen egal ist, dass Ihre “Nummer” tatsächlich gezogen wird und dann zurückfällt, können Sie einfach verhindern, dass sie dadurch gezogen wird:

 sort: function(event, ui) {
if(ui.item.hasClass('number')) return false;
}