Triable des éléments et sous-éléments dans la liste de jQuery ui sortable

Si vous faites glisser un élément enfant au-delà de tout parent, sa position est mémorisée . C'est quand même quelque chose . Élément doit revenir à la précédente, parent.
Éléments d'enfant doit être capable de se déplacer au sein de la société mère et les parents .
Les éléments de Parent doit être en mesure de se déplacer entre eux.

problèmes:

Comment désactiver le glisser des éléments d'enfant à l'étranger de parents?
Comment permettre aux parents de glisser de droite? Maintenant , si l'exemple de la
premier parent à glisser vers le bas à l'endroit du PARENT n ° 2 ou le PARENT # 3 , il
ne pas déplacer

Code:

<script type="text/javascript" charset="utf-8" src="http://yandex.st/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8" src="http://yandex.st/jquery-ui/1.9.2/jquery-ui.min.js"></script>
<script>
$(document).ready(function(){
var sortable_element = $('.sortable');
sortable_element.sortable(
{
items: ".group-caption, .group-caption .group-item",
handle: ".move",
cursor: "move",
opacity: 0.7,
containment: ".sortable",
placeholder: "movable-placeholder",
revert: 300,
delay: 150,
start: function(e, ui )
{
ui.placeholder.height(ui.helper.outerHeight());
}
});
})
</script>
<style>
.sortable {
}
.group-caption {
background: #D3CAAF;
width: 400px;
display: block;
padding: 20px;
margin: 0 0 15px 0;
}
.group-item {
background: #5E5E5E;
width: 300px;
height: 30px;
display: block;
padding: 3px;
margin: 5px;
color: #fff;
}
.move {
background: #ff0000;
width: 30px;
height: 30px;
float: right;
color: #fff;
text-align: center;
text-transform: uppercase;
line-height: 30px;
font-family: Arial;
cursor: move;
}
</style>
<div class="sortable">
<div class="group-caption">
<h4>PARENT #1</h4>
<div class="move">+</div>
<div class="group-items">
<div class="group-item">CHILD #1<div class="move">+</div></div>
<div class="group-item">CHILD #2<div class="move">+</div></div>
<div class="group-item">CHILD #3<div class="move">+</div></div>
<div class="group-item">CHILD #4<div class="move">+</div></div>
<div class="group-item">CHILD #5<div class="move">+</div></div>
<div class="group-item">CHILD #6<div class="move">+</div></div>
<div class="group-item">CHILD #7<div class="move">+</div></div>
<div class="group-item">CHILD #8<div class="move">+</div></div>
<div class="group-item">CHILD #9<div class="move">+</div></div>
<div class="group-item">CHILD #10<div class="move">+</div></div>
<div class="group-item">CHILD #11<div class="move">+</div></div>
<div class="group-item">CHILD #12<div class="move">+</div></div>
<div class="group-item">CHILD #13<div class="move">+</div></div>
<div class="group-item">CHILD #14<div class="move">+</div></div>
<div class="group-item">CHILD #15<div class="move">+</div></div>
<div class="group-item">CHILD #16<div class="move">+</div></div>
</div>
</div>
<div class="group-caption">
<h4>PARENT #2</h4>
<div class="move">+</div>
<div class="group-items">
<div class="group-item">CHILD #1<div class="move">+</div></div>
<div class="group-item">CHILD #2<div class="move">+</div></div>
<div class="group-item">CHILD #3<div class="move">+</div></div>
<div class="group-item">CHILD #4<div class="move">+</div></div>
</div>
</div>
<div class="group-caption">
<h4>PARENT #3</h4>
<div class="move">+</div>
<div class="group-items">
<div class="group-item">CHILD #1<div class="move">+</div></div>
<div class="group-item">CHILD #2<div class="move">+</div></div>
<div class="group-item">CHILD #3<div class="move">+</div></div>
<div class="group-item">CHILD #4<div class="move">+</div></div>
<div class="group-item">CHILD #5<div class="move">+</div></div>
<div class="group-item">CHILD #6<div class="move">+</div></div>
<div class="group-item">CHILD #7<div class="move">+</div></div>
<div class="group-item">CHILD #8<div class="move">+</div></div>
</div>
</div>
</div>

pouvez-vous faire une maquette dans un jsfiddle?

OriginalL'auteur djmartini | 2014-03-21

15

Si je vous comprends bien vous avez besoin de deux sortables - l'une pour les parents et une pour les enfants et puis les enfants devraient connectWith les parents et vous avez besoin d'un tolerance propriété.
```
//Sort the parents
$(".sortable").sortable({
containment: "parent",
items: "> div",
handle: ".move",
tolerance: "pointer",
cursor: "move",
opacity: 0.7,
revert: 300,
delay: 150,
dropOnEmpty: true,
placeholder: "movable-placeholder",
start: function(e, ui) {
ui.placeholder.height(ui.helper.outerHeight());
}
};
//Sort the children
$(".group-items").sortable({
containment: "parent",
items: "> div",
tolerance: "pointer",
connectWith: '.group-items'
});
```
Voir mon Violon démo.

Mise à JOUR #1

Mis à jour Violon démo à seulement permettre aux enfants de se lier à son parent.

Une approche intéressante, mais vous devez utiliser tout ce que vous avez dit.
La bonne solution, merci!
Super! Est-il possible d'obtenir la sérialisation de données imbriquées parents et les enfants?

OriginalL'auteur DHS

Vous devez vous connecter pour publier un commentaire.