JQueryui - Gérer les listes triées connectées en ne forçant qu'un seul élément par liste

Question

J'utilise des listes triables connectées Jqueryui et je souhaite supprimer des éléments uniquement lorsque la liste connectée est vide, je dois donc forcer l'utilisateur à ajouter 1 élément maximum . L'utilisation de Jquery droppable n'est pas autorisée. Alors, comment puis-je gérer la liste connectée de JQueryui pour restreindre le nombre d'éléments à l'intérieur? Je veux que sortable1 et sortable2 n'acceptent qu'un seul élément de sortable0.

<ul id="sortable0" class="connectedSortable"> 
    <li> word1 </li> <li> word2 </li> <li> wordN </li> 
</ul> 

<ul id="sortable1" class="connectedSortable"> </ul> 
<ul id="sortable2" class="connectedSortable"> </ul> 

$(function() { 
    $("#sortable0, #sortable1, #sortable2").sortable({ connectWith: ".connectedSortable" }); 
}); 

Merci d'avance.

Answer 1

Vous pouvez également utiliser une solution comme celui-ci

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

Cela vous permet de déplacer un seul élément #sortable0-#sortable1 et/ou #sortable2. Vous pouvez également les déplacer vers #sortable0. ou déplacez-le par ex. #sortable1 à #sortable2 si #sortable2 est encore vide

Cocher cette test case

---

Le sélecteur j'ai écrit dans connectWith est évalué chaque fois que vous faites glisser un élément autour. ainsi, si sortable1/2 contient déjà un élément, ils ne sont pas marqués connectWith et ne sont pas disponibles en tant que cible. Si vous avez besoin d'un contrôle plus précis, par ex. sortable0 acceptant un certain nombre d'éléments, sortable1 exactement 0 ou 1 et sortable2 0 ou 1 ou 2 éléments que vous pouvez utiliser

$("#sortable0, #sortable1, #sortable2").sortable({ 
    connectWith: "#sortable0, #sortable1:not(:has(li)), #sortable2:not(:has(li:eq(1)))" 
}); 

Edit: le code ne fonctionne sur striked pas besoin de regarder dans ce

Answer 2

Comme il n'y a pas d'option par défaut pour cela, vous devez utiliser un événement tel que beforeStop ou receive. Par exemple.

$("#sortable0, #sortable1, #sortable2").sortable(
    { connectWith: ".connectedSortable", 
    beforeStop: function(event,ui){ 
     // Do the check 
    } 
    } 
); 

par exemple.