JqueryUI Sortable - Fonctionnalité pour déplacer uniquement les éléments dans la sous-liste (3e pos)

Nov 23 2020

J'essaye de définir une fonctionnalité spécifique en utilisant jquery sortable. Je semble être proche mais je rencontre un problème. J'ai besoin des sous-éléments pour passer aux postes de niveau 3 uniquement - sous les types de compte

http://jsfiddle.net/Davos8549/x6f0upng/1/

Je veux seulement que les sous-éléments puissent être glisser-déposer dans d'autres listes qui ont la classe = "hasItems"

Je devrais toujours pouvoir déplacer AR, VZ, BANK dans son conteneur principal "Asset". Mais je ne devrais pas être en mesure de déposer le tout dans une sous-liste (ce qui est le problème que j'ai maintenant).

Asset
    AR
        subitem2-1
        subitem3-15
        subitem3-25
        subitem2-2
        subitem2-3
        subitem2-4
    VZ
        subitem3-1
        subitem3-2
        subitem1-35
        subitem3-3
        subitem3-4
    Bank
        subitem1-1
        subitem1-2
        subitem3-45
        subitem1-3
        subitem1-4
Liability
    Bank5
        subitem1-15
        subitem1-25
        subitem1-45
    AR5
        subitem2-15
        subitem2-25
        subitem2-35
        subitem2-45
    VZ5
        subitem3-35

Je pense que la solution pourrait être dans ce code:

<script>
            $(function() { $('ul.mainlist').sortable({
                    connectWith: 'ul.mainlist',
                    beforeStop: function(ev, ui) {
                        if ($(ui.item).hasClass('hasItems') && $(ui.placeholder).parent()[0] != this) {
                            $(this).sortable('cancel'); } } }); $('ul.sublist').sortable({
                    connectWith: 'ul.sublist'
                });
            });
        </script>

Réponses

1 Vickel Nov 24 2020 at 20:43

Vous devez être plus précis pour identifier vos éléments DOM que vous souhaitez déplacer:

J'ai d'abord apporté quelques modifications mineures à votre html, en ajoutant la classe "groupe" à la <li>balise des groupes Banque et Responsabilité , ce qui les rend plus faciles à identifier.

J'ai également ajouté la classe "connecté" aux sous-listes, que je veux être interchangeables, que par exemple vous pouvez avoir les deux, des sous-éléments interchangeables complets ainsi que des sous-éléments, qui ne peuvent être triés que dans leur propre groupe. Cette classe "connecté" est utilisé dans la sortable()fonctionnalité de la connectWithfonction, voir Listes de connexion

Au cas où un groupe deviendrait vide, vous devez définir une hauteur minimale pour pouvoir replacer les éléments dans ce groupe vide.

puis j'ai changé le triable en:

$(function() { $('li.group ul.sublist').sortable({

    });
    $('.hasItems ul.sublist').sortable({
            connectWith: ".connected"
    }).disableSelection();
});

qui vous permet maintenant de vous déplacer comme vous l'avez demandé.

vérifiez le violon pour plus de détails ou

$(function() {
    $('li.group ul.sublist').sortable({ }); $('.hasItems ul.sublist').sortable({
            connectWith: ".connected"
    }).disableSelection();
});
body
{
    font-family: Arial, Tahoma, San-Serif;
    font-size: 12px;
}
ul {
    padding: 0;
    list-style-type: none;
}
p
{
    margin: 0 0 20px;
}
ul.mainlist
{
    float: left;
    margin: 0 20px 0 0;
    width: 100px;
}

ul.mainlist li
{
    background: #fff;
    border: solid 1px #ccc;
    padding: 10px;
    width:100%;
}
ul.sublist 
{
  min-height: 35px;
  background: gold;
}
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script
              src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"
              integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="
              crossorigin="anonymous"></script>
        
        <p>sublists shouldn't be able to be dragged out of their normal list</p>
<ul id="list1" class='mainlist'>
                <li class="group">Asset
                    <ul class="sublist">
                        <li class="hasItems">Bank
                            <ul class="sublist connected">
                                <li>subitem1-1</li>
                                <li>subitem1-2</li>
                                <li>subitem1-3</li>
                                <li>subitem1-4</li>
                            </ul>
                        
                        </li>
                        <li class="hasItems">AR
                            <ul class="sublist connected">
                                <li>subitem2-1</li>
                                <li>subitem2-2</li>
                                <li>subitem2-3</li>
                                <li>subitem2-4</li>
                            </ul>
                        </li>
                        <li class="hasItems">VZ
                            <ul class="sublist connected">
                                <li>subitem3-1</li>
                                <li>subitem3-2</li>
                                <li>subitem3-3</li>
                                <li>subitem3-4</li>
                            </ul>
                        </li>
                    </ul>
                
                </li>
                
                <li class="group">Liability
                    <ul class="sublist">
                        <li class="hasItems">Bank5
                            <ul class="sublist connected">
                                <li>subitem1-15</li>
                                <li>subitem1-25</li>
                                <li>subitem1-35</li>
                                <li>subitem1-45</li>
                            </ul>
                        
                        </li>
                        <li class="hasItems">AR5
                            <ul class="sublist">
                                <li>subitem2-15</li>
                                <li>subitem2-25</li>
                                <li>subitem2-35</li>
                                <li>subitem2-45</li>
                            </ul>
                        </li>
                        <li class="hasItems">VZ5
                            <ul class="sublist">
                                <li>subitem3-15</li>
                                <li>subitem3-25</li>
                                <li>subitem3-35</li>
                                <li>subitem3-45</li>
                            </ul>
                        </li>
                    </ul>
                
                </li>
                
            </ul>