JqueryUI Sortable - Fonctionnalité pour déplacer uniquement les éléments dans la sous-liste (3e pos)
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
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 connectWith
fonction, 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>