Empêcher la suppression de l'élément de liste dans JqueryUI triable

J'ai deux listes #sortable1 et #sortable 2 qui sont connectés sortables, comme le montre cette exemple.

Vous pouvez faire glisser et déposer les éléments de la liste de sortable1 à sortable 2. Cependant, si un élément dans sortable 1 contient la classe "nombre", je veux empêcher la baisse sur Sortable2 et de rendre ainsi l'élément glissé retomber dans sortable 1.

J'ai utilisé de la façon suivante sur sortable2:

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

mais il supprime l'élément de la liste à partir de deux tables au total. Toute aide sera appréciée.

source d'informationauteur user1038814

14

Vous pouvez utiliser une combinaison de la beforeStop et sortable('cancel') méthodes pour valider les élément déplacé. Dans cet exemplesur un élément qui est tombé, j'ai vérifier si l'élément est valide par:
1. Vérifier si l'élément a de la classe number
2. et vérifier si l'élément de la liste a été supprimée dans l' list2
Ce qui est légèrement plus codé en dur que je voudrais, donc, sinon ce que vous pourriez faire est de vérifier le parent de l'élément déposé contre thispour vérifier si les listes sont différentes. Cela signifie que vous pourriez éventuellement avoir un élément de number dans list1 et list2mais ils ne sont pas interchangeables.

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

Pour tous ceux qui lisent ceci, dans l'avenir, comme mentionné par briansol dans les commentaires pour la accepté de répondre, il déclenche une erreur
```
Uncaught TypeError: Cannot read property 'removeChild' of null
```
La documentation en particulier dit

annuler()

Annule un changement dans le courant sortable et revient à l'état, avant le moment où le tri actuel a été commencé. Utile dans le arrêter et recevoir des fonctions de rappel.

L'annulation de la sorte lors d'autres événements n'est pas fiable, il est Donc préférable d'utiliser le recevoir événement comme indiqué dans Mj Azani's réponse ou utiliser le stop événement comme suit:
```
$('#list1').sortable({
  connectWith: 'ul',
  stop: function(ev, ui) {
    if(ui.item.hasClass("number"))
      $(this).sortable("cancel");
   }
}); 

$('#list2').sortable({
   connectWith: 'ul',
});  
```
Démo

Essayer cet exemple

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

$('#liste 2').sortable({ 
connectWith: "ul", 
recevoir: function(ev, ui) { 
si(ui.de l'élément.hasClass("nombre")) 
l'interface utilisateur.expéditeur.sortable("annuler"); 
} 
});

1

Après quelques expériences, j'ai trouvé que, de loin, la méthode la plus simple est d'utiliser le retirer de l'événement, que l'essentiel se déclenche uniquement lorsque vous essayez de déplacer un élément dans un nouveau sortable (qui était auparavant disponible comme une cible à l'aide connectWith).

Simplement ajouter ceci à votre sortable appel:
```
remove:function(e,ui) {
    if(ui.item.hasClass('your_restricted_classname')) return false;
},
```
0

Si vous n'avez pas besoin d'être en mesure de faire glisser les éléments avec la classe "numéro", vous pouvez aussi limiter l'ensemble du glisser-déposer pour les éléments qui n'ont pas la classe "nombre":
```
$("#sortable1, #sortable2").sortable({
    connectWith: ".connectedSortable",
    items: "li:not(.number)"
});
```
Vous pouvez l'essayer ici: http://jsfiddle.net/60gwjsgb/1/

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

de l'essayer.

0

Si a) vous n'avez juste ces 2 listes, et b) vous ne vous souciez pas de votre "numéro" en fait traîné, puis baisse du retour, vous pouvez tout simplement l'empêcher de se faire entraîner par ce:
```
 sort: function(event, ui) {
if(ui.item.hasClass('number')) return false;
}
```

Vous devez vous connecter pour publier un commentaire.

jsFiddle Exemple