Sortable avec tree limité en profondeur ?

Version imprimable

Bonjour, je ne trouve pas la solution au problème suivant, peut-être avez vous des pistes ?
J'ai une liste sortable composée d'objectifs.
On doit pouvoir dropper un objectif dans un autre objectif pour en faire un sous objectif.
Mais on ne doit pas pouvoir dropper un objectif qui contient des sous objectifs dans un objectif.
Cela veut dire que je doit gérer donc un tree avec un seul niveau d'arborescance.
Dans la piste que j'ai suivi tout fonctionne sauf que je n'arrive pas à interdire le drop d'un objectif avec sous objectifs dans un autre objectif quand celui ci a déjà des sous objectifs :(

Voici ce que j'ai fait :

Liste html

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 
<div id="rfo_boxeObjectifs" class="rfo_boxeObjectifs">
 
	<table class="rfo_mot_tableOi" id="rfo_mot_tableOi_1"> <---- ICI UN OBJECTIF
		<thead>
			[...]
		</thead>
		<tfoot>
		 [...]
		<tbody>
			<tr>
			 [...]
			</tr>
			<tr>
				<td class="SousObjectifs" colspan="5">sous objectifs ici</td> 
			</tr>
		</tbody>
	</table>		
 
	<table class="rfo_mot_tableOi" id="rfo_mot_tableOi_2"> <---- ICI UN OBJECTIF
		<thead>
			[...]
		</thead>
		<tfoot>
		 [...]
		<tbody>
			<tr>
			 [...]
			</tr>
			<tr>
				<td class="SousObjectifs" colspan="5">sous objectifs ici</td> 
			</tr>
		</tbody>
	</table>
 
	<table class="rfo_mot_tableOi" id="rfo_mot_tableOi_3"> <---- ICI UN OBJECTIF
		<thead>
			[...]
		</thead>
		<tfoot>
		 [...]
		<tbody>
			<tr>
			 [...]
			</tr>
			<tr>
				<td class="SousObjectifs" colspan="5">
						<table class="rfo_mot_tableOi" id="rfo_mot_tableOi_4"> <---- ICI UN SOUS OBJECTIF
								<thead>
									[...]
								</thead>
								<tfoot>
					 				[...]
								<tbody>
								<tr>
						 			[...]
								</tr>
								<tr>
									<td class="SousObjectifs" colspan="5">doit rester vide</td> 
								</tr>
						</tbody>
					</table>
				</td> 
			</tr>
		</tbody>
	</table>
</div>

Voici mes js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
 
function rfo_objectifs_intermediaires_setSortable () {
 
	// les élements qui vont être inclus dans le sortable
    // les objectifs et sous objectifs
    var arr = $$( 'td.SousObjectifs');
    var containments =arr.concat( $( 'rfo_boxeObjectifs'));
    // pour trier les objectifs
    Sortable.destroy('rfo_boxeObjectifs');
 
    Sortable.create('rfo_boxeObjectifs', {
    	tag :'table',
    	containment:containments
    	});
 
	// ici on va contrôler le tri
	// des sous objectifs
	$$('td.SousObjectifs').each(
			function(elem) {
				Sortable.destroy(elem);
				Sortable.create(elem,
						{tag:'table',
						 only:'rfo_mot_tableOi' }
                       );
             });
 
        // positionne le droppable sur les td qui doivent
        // contenir les sous objectifs
        // IMPORTANT : on ne peut pdéfinir en sous objectif
        // un objectif qui a déjà des sous objectifs
        $$('td.SousObjectifs').each(
                        function(elem) {
                                 Droppables.add(elem, {
                                            accept: 'rfo_mot_tableOi',
                                            hoverclass: 'SousObjectifsHover',
                                            onDrop:  function(e){DropHandler(e,elem);}
                                          });
                        });
 
 
}
 
function DropHandler( draggable,droparea){
        if (draggable.getElementsByTagName('table').length==0){ <-- LA SI IL Y A DES TABLE C'EST OBJECTIF AVEC SOUS OBJECTIFS
        	draggable.parentNode.removeChild(draggable);
            droparea.appendChild(draggable);
 
        }
    return true;
}

Donc ce que je fait :
Je met un sortable sur toutes les table de la div 'rfo_boxeObjectifs',
Je dit que que les destinations des drop (containment) ce sont 'rfo_boxeObjectifs' et les 'td.SousObjectifs'
J'ajoute un tri sur les sous objectif déjà présents
je rend droppables tous les 'td.SousObjectifs' pour essayer de contrôller ce que l'on dépose dedans avce la function DropHandler

Bon tout ceci fonctionne sauf pour un cas !!! et ce cas est justement mon problème !!!

Le contrôle du drop sur 'td.SousObjectifs' fait bien son boulot. Mais quand on drop dans 'td.SousObjectifs' et qu'il y déjà des sous objectifs le contrôle n'est pas effectué (c'est le sortable qui prend la main), donc on peut dans ce cas balancer dedans un objectifs avec des sous objectifs.

J'ai essayé avec onChange mais je ne sais pas comment je pourrait faire pour annuler le drop dans cet évènement.
Avez-vous des idées ?

Salut,

Le mieux serait de désactiver la capacité à Dragger un élément quand il a reçu un sous élément.

Pas testé mais surement possible :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
// une fonction qui renvoie un Draggable en fonction d'un élément (ou null si pas trouvé)
function findDraggable(element) {
    // peut-etre on l'a déjà calculé
    var precomputed = element.retrieve("_draggable_", null);
    if(precomputed != null) return precomputed;
    for(var i=0, size=Draggables.drags.length, i<size; i++) {
      if(drags[i].element.identify() == element.identify()) {
        return drags[i];
      }
    }
    return null;
}
 
// .. dans le onDrop:
onDrop: function(drag, drop, e) {
  // on recupere l'ancien parent de notre element draggé
  var prevParent = $(drag.parentNode);
  // on gere le drop
  DropHandler(drag,drop);
  // on essaye de récupérer le drag correspondant au drop
  var targetDropAsDrag = findDraggable(drop);
  // s'il est trouvé (pas null, on le desactive)
  if(targetDropAsDrag != null) {
    Draggables.unregister(targetDropAsDrag);
  }
  // on regarde si le précédent parent n'a plus de sous éléments
  if(prevParent.select(".rfo_mot_tableOi").length == 0) {
    // et on le réactive si on le trouve en tant que draggable
    var prevParentAsDrag = findDraggable(prevParent);
    if(prevParentAsDrag != null) {
      Draggables.register(prevParentAsDrag);
    }
  }
}

Bonjour et merci pour ta réponse,
Désolé de ne n'avoir pas pu répondre avant :(
Je vais tester cela et j'indiquerais le résultat ici.

Citation:

Envoyé par gwyohm

Salut,

Le mieux serait de désactiver la capacité à Dragger un élément quand il a reçu un sous élément.

Pas testé mais surement possible :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
 
// une fonction qui renvoie un Draggable en fonction d'un élément (ou null si pas trouvé)
function findDraggable(element) {
    // peut-etre on l'a déjà calculé
    var precomputed = element.retrieve("_draggable_", null);
    if(precomputed != null) return precomputed;
    for(var i=0, size=Draggables.drags.length, i<size; i++) {
      if(drags[i].element.identify() == element.identify()) {
        return drags[i];
      }
    }
    return null;
}
 
// .. dans le onDrop:
onDrop: function(drag, drop, e) {
  // on recupere l'ancien parent de notre element draggé
  var prevParent = $(drag.parentNode);
  // on gere le drop
  DropHandler(drag,drop);
  // on essaye de récupérer le drag correspondant au drop
  var targetDropAsDrag = findDraggable(drop);
  // s'il est trouvé (pas null, on le desactive)
  if(targetDropAsDrag != null) {
    Draggables.unregister(targetDropAsDrag);
  }
  // on regarde si le précédent parent n'a plus de sous éléments
  if(prevParent.select(".rfo_mot_tableOi").length == 0) {
    // et on le réactive si on le trouve en tant que draggable
    var prevParentAsDrag = findDraggable(prevParent);
    if(prevParentAsDrag != null) {
      Draggables.register(prevParentAsDrag);
    }
  }
}