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
Voici mes js
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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>
Donc ce que je fait :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
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; }
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 ?
Partager