web-dev-qa-db-fra.com

Empêcher le dépôt d'éléments de liste dans JqueryUI pouvant être triés

J'ai deux listes #sortable1 et #sortable 2 qui sont des sortables connectés, comme indiqué dans cet exemple .

Vous pouvez faire glisser des éléments de la liste de sortable1 à sortable 2. Cependant, si un élément dans sortable 1 contient la classe "numéro", je veux empêcher la chute sur Sortable2 et ainsi faire tomber l’élément glissé dans triable 1 . 

J'ai utilisé ce qui suit sur sortable2:

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

mais il supprime l’élément de la liste des deux tables. Toute aide serait appréciée.

jqueryjquery-uidrag-and-dropjquery-ui-sortable
18
user1038814

Vous pouvez utiliser une combinaison des méthodes beforeStop et sortable('cancel') pour valider l'élément en cours de déplacement. Dans cet exemple , lorsqu’un élément est supprimé, je vérifie si l’élément est valide par:

  1. Vérification si l'élément a la classe number
  2. et vérifiant si l'élément de la liste a été supprimé dans list2

C’est un peu plus codé que je le souhaiterais. Par conséquent, vous pouvez également vérifier le parent de l’élément supprimé avec this, afin de vérifier si les listes sont différentes. Cela signifie que vous pouvez potentiellement avoir un élément de number dans list1 et list2, mais ils ne sont pas interchangeables.

Exemple jsFiddle

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

Pour ceux qui liront ceci à l’avenir, comme mentionné par briansol dans les commentaires de la réponse acceptée, cela jettera une erreur

Uncaught TypeError: Cannot read property 'removeChild' of null

La documentation dit particulièrement

cancel()

Annule un changement dans le triable actuel et le rétablit dans l'état antérieur au début du tri actuel. Utile dans les fonctions stop et receive .

L'annulation du tri lors d'autres événements n'est pas fiable. Il est donc préférable d'utiliser l'événement receive comme indiqué dans Mj Azanirépondre ou d'utiliser l'événement stop comme suit:

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

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

Démo

26
T J

Essayez cet exemple

 $ ('# list1'). sortable ({
 connectWith: 'ul' 
}); 
 
 $ ('# list2'). triable ({
 connectWith: 'ul', 
 receive: function (ev, ui) {
 if (ui.item.hasClass ("numéro")) 
 ui.sender.sortable ("cancel"); 
} 
});
13
Mj Azani

Après quelques expériences, j'ai trouvé que de loin la méthode la plus simple consiste à utiliser l'événement remove, qui ne se déclenche que lorsque vous essayez de déposer un élément dans un nouvel objet de tri (qui était auparavant disponible en tant que cible à l'aide de connectWith).

Ajoutez simplement ceci à votre appel triable:

remove:function(e,ui) {
    if(ui.item.hasClass('your_restricted_classname')) return false;
},
1
Ian Young
beforeStop: function(ev, ui) {
                if ($(ui.item).hasClass('number') && 
                    $(ui.placeholder).parent()[0] != this) {
                    $(this).sortable('cancel');
                }
            }

essaye ça.

0
TanvirChowdhury

Si vous n'avez pas du tout besoin de pouvoir faire glisser les éléments avec la classe "numéro", vous pouvez également restreindre la fonctionnalité de glisser-déposer aux éléments qui n'ont pas la classe "numéro":

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

Vous pouvez l'essayer ici: http://jsfiddle.net/60gwjsgb/1/

0
ollie

Si a) vous n'avez que ces 2 listes, et b) vous ne vous souciez pas que votre "numéro" soit réellement déplacé, puis retiré, vous pouvez simplement l'empêcher de se faire glisser par ceci:

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