wake-up-neo.com

Verhindern Sie das Löschen des Listenelements in der sortierbaren JqueryUI

Ich habe zwei Listen #sortable1 und #sortable 2, die verbundene sortierbare Elemente sind, wie in diesem Beispiel gezeigt.

Sie können Listenelemente von sortable1 nach sortable 2 ziehen und ablegen. Wenn jedoch ein Element in sortable 1 die Klasse "number" enthält, möchte ich verhindern, dass das Ablegen auf Sortable2 ist und das gezogene Element daher zurückfällt sortierbar 1

Ich habe folgendes für sortable2 verwendet:

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

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

18
user1038814

Sie können eine Kombination der Methoden beforeStop und sortable('cancel') verwenden, um das verschobene Element zu überprüfen. In diesem Beispiel überprüfe ich beim Ablegen eines Artikels, ob der Artikel gültig ist.

  1. Prüfen, ob der Artikel die Klasse number hat
  2. und Überprüfen, ob das Listenelement in list2 abgelegt wurde

Dies ist etwas fester als ich möchte, also können Sie alternativ das übergeordnete Element des abgelegten Elements mit this überprüfen, um zu prüfen, ob die Listen unterschiedlich sind. Dies bedeutet, dass möglicherweise ein Element mit number in list1 und list2 vorhanden ist, die jedoch nicht austauschbar sind.

jsFiddle Beispiel

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

Für jeden, der dies in Zukunft liest, wie von briansol in den Kommentaren für die akzeptierte Antwort erwähnt, wirft es einen Fehler aus

Uncaught TypeError: Cannot read property 'removeChild' of null

Das sagt die Dokumentation besonders

cancel()

Bricht eine Änderung der aktuellen Sortierbarkeit ab und setzt sie in den Zustand vor dem Beginn der aktuellen Sortierung zurück. Nützlich in den Funktionen stop und receive callback.

Das Abbrechen der Sortierung während anderer Ereignisse ist unzuverlässig. Verwenden Sie daher das receive -Ereignis wie in Mj Azani 's answer oder das stop -Ereignis wie folgt:

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

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

Demo

26
T J

Versuchen Sie dieses Beispiel

 $ ('# list1'). sortierbar ({
 connectWith: 'ul' 
}); 
 
 $ ('# list2'). sortierbar ({
 connectWith: 'ul', 
 erhalten: Funktion (ev, ui) {
 if (ui.item.hasClass ("number")) 
 ui.sender.sortable ("cancel"); 
} 
}); 
13
Mj Azani

Nach einigen Experimenten habe ich herausgefunden, dass die einfachste Methode die Verwendung des remove -Ereignisses ist, das im Wesentlichen nur ausgelöst wird, wenn Sie versuchen, ein Element in einer neuen Sortierbarkeit abzulegen (die zuvor mit connectWith als Ziel verfügbar gemacht wurde).

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

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

Hier sind meine 2 Cent. Wenn Sie die Sortierung in einer der verbundenen Listen nicht zulassen möchten, können Sie sie aus den Containern im Instanzobjekt entfernen, wenn start even ausgelöst wird, sodass die Sortierung überhaupt nicht erfolgt und Sie die Sortierung wiederherstellen müssen Anschließend können Sie die sortierbaren Elemente neu erstellen oder entfernte Elemente zum Container-Array hinzufügen. Es würde so aussehen:

    start: function(e, ui){
        if(ui.item.hasClass('uniqToSortableItem')){
            var instance = $(this).sortable( "instance" );
            var newContainers = [];
            instance.containers.forEach((el)=> {
                if(!el.element.hasClass('sortableToDisable')){
                    newContainers.Push(el);
                } 
            });
            // in case you need to save initial array just attach it to ui.helper
            ui.helper.initialContainersArray = instance.containers;
            instance.containers = newContainers;
        }
    },
    stop: function(e, ui){
        // returning containers array to previous state if necessary
        if(ui.helper.initialContainersArray){
            $(this).sortable( "instance" ).containers = ui.helper.initialContainersArray;
        }
    }
0
Kirill
beforeStop: function(ev, ui) {
                if ($(ui.item).hasClass('number') && 
                    $(ui.placeholder).parent()[0] != this) {
                    $(this).sortable('cancel');
                }
            }

versuche dies.

0
TanvirChowdhury

Wenn Sie die Elemente mit der Klasse "number" überhaupt nicht ziehen müssen, können Sie die gesamte Drag-and-Drop-Funktion auf Elemente beschränken, die nicht die Klasse "number" haben:

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

Sie können es hier ausprobieren: http://jsfiddle.net/60gwjsgb/1/

0
ollie

Wenn a) Sie nur über diese beiden Listen verfügen, und b) es Ihnen egal ist, ob Ihre "Nummer" tatsächlich gezogen wird und dann zurückfällt, können Sie einfach verhindern, dass die folgende Zahl mitgezogen wird:

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