UI Accordion et UI Draggable. Les "accordions" ne s'ouvrent plus après un drag & drop [Résolu]

TheDoci · 23/04/2011, 10h19

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 :

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
});
});

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
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>

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".
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^^

SpaceFrog · 24/04/2011, 09h26

A vue de nez sans plonger dans le code je dirais qu'il manque un live() ou une reinitialisation de l'accordeon après le drop afin de prendre en compte les nouveau éléments ...

danielhagnoul · 24/04/2011, 11h51

Bonjour

Je n'ai pas la solution à votre problème d'élément UI Dragabble.

Voici un exemple de deux UI Accordion sortable et connectWith le voisin on voit que l'on peut passer un volet d'une liste à une autre et qu'il reste fonctionnel.

Mais le volet transféré reste lié à son UI Accordion d'origine, on s'en aperçoit lorsque l'on ouvre un volet de la liste 1 et qu'un volet de la liste 1 transféré dans la liste 2 se ferme.

On s'en aperçoit aussi lorsque plus d'un volet reste ouvert dans la même liste.

Je n'ai pas de solution pour ce problème et plus le temps de chercher, car je dois m'absenter jusqu'à ce soir.

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/humanity/jquery-ui.css">
	<style>
		/* Base */
		body {background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0px; padding:0px; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:3px; padding-top:3px; }
        li {padding-bottom:3px; }
		label {display:block; }
		input {width:250px; }
		input[type="button"] {width:auto; }
		input[required] {border-right:3px solid orange; }
		td {padding:3px; }
		.conteneur {width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* -- */
		#accordion {
			float:left;
			width:400px;
			margin:12px;
		}
		#accordionDeux {
			float:left;
			width:400px;
			margin:12px;
		}
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
		<div id="accordion">
			<div>
				<h3><a href="#">Section 1</a></h3>
				<div>
					<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
				</div>
			</div>
			<div>
				<h3><a href="#">Section 2</a></h3>
				<div>
					<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
				</div>
			</div>
			<div>
				<h3><a href="#">Section 3</a></h3>
				<div>
					<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
					<ul>
						<li>List item one</li>
						<li>List item two</li>
						<li>List item three</li>
					</ul>
				</div>
			</div>
			<div>
				<h3><a href="#">Section 4</a></h3>
				<div>
					<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
				</div>
			</div>
		</div>
 
		<div id="accordionDeux">
			<div>
				<h3><a href="#">Section 5</a></h3>
				<div>
					<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
				</div>
			</div>
			<div>
				<h3><a href="#">Section 6</a></h3>
				<div>
					<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
				</div>
			</div>
			<div>
				<h3><a href="#">Section 7</a></h3>
				<div>
					<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
					<ul>
						<li>List item one</li>
						<li>List item two</li>
						<li>List item three</li>
					</ul>
				</div>
			</div>
			<div>
				<h3><a href="#">Section 8</a></h3>
				<div>
					<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
				</div>
			</div>
		</div>
 
		<div id="affiche"></div>
	</section>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
	<script>
		$(function(){
 
			$("#accordion, #accordionDeux").accordion({
				header: "> div > h3",
				collapsible: true,
				active: false,
				autoHeight: false
			});
 
			$("#accordion").sortable({
				connectWith: "#accordionDeux",
				axis: "y",
				handle: "h3"
			});
 
			$("#accordionDeux").sortable({
				connectWith: "#accordion",
				axis: "y",
				handle: "h3"
			});
		});
	</script>
</body>  
</html>

TheDoci · 24/04/2011, 15h20

En effet il faut détruire l'accordion et le reconstruire.

La solution + démo ici : http://jsfiddle.net/t3tVA/2/

danielhagnoul · 24/04/2011, 22h06

Bonsoir

Votre solution s'applique à mon exemple à la condition d'enlever la propriété axis, qui dans le cas de deux listes sortables ne sert de toute façon à rien.

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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/humanity/jquery-ui.css">
	<style>
		/* Base */
		body {background-color:#dcdcdc; color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:serif; }
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0px; padding:0px; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:3px; padding-top:3px; }
        li {padding-bottom:3px; }
		label {display:block; }
		input {width:250px; }
		input[type="button"] {width:auto; }
		input[required] {border-right:3px solid orange; }
		td {padding:3px; }
		.conteneur {width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
 
		/* -- */
		#accordion {
			float:left;
			width:400px;
			margin:12px;
		}
		#accordionDeux {
			float:left;
			width:400px;
			margin:12px;
		}
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
		<div id="accordion">
			<div>
				<h3><a href="#">Section 1</a></h3>
				<div>
					<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
				</div>
			</div>
			<div>
				<h3><a href="#">Section 2</a></h3>
				<div>
					<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
				</div>
			</div>
			<div>
				<h3><a href="#">Section 3</a></h3>
				<div>
					<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
					<ul>
						<li>List item one</li>
						<li>List item two</li>
						<li>List item three</li>
					</ul>
				</div>
			</div>
			<div>
				<h3><a href="#">Section 4</a></h3>
				<div>
					<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
				</div>
			</div>
		</div>
 
		<div id="accordionDeux">
			<div>
				<h3><a href="#">Section 5</a></h3>
				<div>
					<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
				</div>
			</div>
			<div>
				<h3><a href="#">Section 6</a></h3>
				<div>
					<p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna. </p>
				</div>
			</div>
			<div>
				<h3><a href="#">Section 7</a></h3>
				<div>
					<p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis. Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui. </p>
					<ul>
						<li>List item one</li>
						<li>List item two</li>
						<li>List item three</li>
					</ul>
				</div>
			</div>
			<div>
				<h3><a href="#">Section 8</a></h3>
				<div>
					<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est. </p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
				</div>
			</div>
		</div>
 
		<div id="affiche"></div>
	</section>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
	<script>
		$(function(){
			$("#accordion").accordion({
				header: "> div > h3",
				collapsible: true,
				active: false,
				autoHeight: false
			}).sortable({
				connectWith: "#accordionDeux",
				handle: "h3",
				receive: function(event, ui) {
					$("#accordionDeux").accordion("destroy").accordion({
						header: "> div > h3",
						collapsible: true,
						active: false,
						autoHeight: false
					});
 
					$("#accordion").accordion("destroy").accordion({
						header: "> div > h3",
						collapsible: true,
						active: false,
						autoHeight: false
					});
				}
			});
 
			$("#accordionDeux").accordion({
				header: "> div > h3",
				collapsible: true,
				active: false,
				autoHeight: false
			}).sortable({
				connectWith: "#accordion",
				handle: "h3",
				receive: function(event, ui) {
					$("#accordion").accordion("destroy").accordion({
						header: "> div > h3",
						collapsible: true,
						active: false,
						autoHeight: false
					});
 
					$("#accordionDeux").accordion("destroy").accordion({
						header: "> div > h3",
						collapsible: true,
						active: false,
						autoHeight: false
					});
				}
			});
		});
	</script>
</body>  
</html>

24/04/2011, 09h26	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	A vue de nez sans plonger dans le code je dirais qu'il manque un live() ou une reinitialisation de l'accordeon après le drop afin de prendre en compte les nouveau éléments ... __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

24/04/2011, 15h20	#4
TheDoci Futur Membre du Club Inscription : mars 2006 Messages : 106 Détails du profil Informations forums : Inscription : mars 2006 Messages : 106 Points : 18 Points : 18	En effet il faut détruire l'accordion et le reconstruire. La solution + démo ici : http://jsfiddle.net/t3tVA/2/
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email