Bonjour,
J'ai une page web qui contient 2 grandes parties :
* la première est une liste triable d'éléments. Chacun de ces éléments est un accordéon (Accordion).
* la deuxième est une liste d'accordéons draggables. Ces éléments peuvent être ajoutés dans la première partie (donc déplacés vers la liste triable).
Une démo sera peut-être plus clair : http://jsfiddle.net/t3tVA/
Quand vous prenez l'élément "Something" et que vous l'insérez dans la liste triée du haut, l'accordéon ne s'ouvre plus.
Voici mon code Javascript :
et le HTML qui va avec :
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 $(function() { $( "> div", "#questionsDispos" ).draggable({ helper: "clone", revert: "invalid", cursor: "move", handle: "h3", connectToSortable: ".questions" }); $( ".questions" ).accordion({ header: "> div > h3", collapsible: true, active: false, autoHeight: false }).sortable({ handle: "h3", receive: function(event, ui) { $(ui.item).removeClass(); $(ui.item).removeAttr("style"); } }); $( "#questionsDispos" ).accordion({ header: "> div > h3", collapsible: true, active: false, autoHeight: false }); });
PS : J'ai dû patcher mon fichier jquery-ui-1.8.11.custom.min.js pour corriger un bug et pouvoir utiliser ui.item dans l'événement receive de "Sortable".
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 <div class="questions"> <div> <h3><a href="#">Question 1. My First Question ?</a></h3> <div> First content<br /> </div> </div> <div> <h3><a href="#">Question 2. My Second Question ?</a></h3> <div> Second content<br /> </div> </div> <div> <h3><a href="#">Question 3. My Third Question ?</a></h3> <div> Third content<br /> </div> </div> </div> Questions disponibles :<br /> <div id="questionsDispos"> <div> <h3><a href="#">Something</a></h3> <div> My Content Here<br /> </div> </div> </div>
Vous pouvez le télécharger ici : http://www.toofiles.com/fr/oip/docum...mminpatch.html
Si quelqu'un trouve une solution à mon problème, je le bénie^^
Partager