Recuperer une liste apres drag and drop (shopping-cart.html)

**Skytrancer** · 25/08/2011, 11h06

Bonjour,
J essaye de manipuler l'effet drag and drop de jquery.
Par exemple si l'on reprend la demo shopping-cart.html fournie avec jquery UI (jquery-ui-1.8.13.custom\development-bundle\demos\droppable\shopping-cart.html),

j 'aimerais avoir le moyen de recuperer TOUS les éléments dropper dans le "caddie".
Je ne vois pas trop comment effectuer cette récupération.

Merci

Nico.

**Shikiryu** · 25/08/2011, 17h15

Dans le cadre de la démo, tu pourrais faire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
var list = [];
$('#cart').find('ol.ui-droppable li').each(function(){
    list.push($(this).html());
});
alert(list);

list possède alors un tableau avec dans chaque case, le contenu de la liste du cart.

Les selectors seront donc à changer selon les cas.

**Skytrancer** · 26/08/2011, 11h11

Yes ! Un grand merci pour la reponse

Mais j'aimerais bien un peu d'explication sur le fonctionnement du "ol.ui-droppable" du find

et sur le "push"

**Nico_SAS** · 07/09/2011, 22h17

Bonjour
J up le sujet pour savoir si il y aurait moyen (comment m'y prendre), toujours a travers cet exemple de pouvoir juste par un click bouton de pour basculer toute la liste de gauche (product) dans la zone de droite (Shopping Cart)

Merci

**danielhagnoul** · 08/09/2011, 01h03

Bonsoir

Voici un exemple (il suffit de copier-coller pour le tester) qui répond à votre question plus des bonus. J'ai choisi de placer le "Select All" en tête de chaque liste, mais on peut assez facilement modifier le code.

J'ai eu beaucoup de mal, pas avec l'exemple, mais avec la dernière version de mon IDE qui se bloque sans arrêt.

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
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
<!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.16/themes/humanity/jquery-ui.css">
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css" />
	<style>
		/* Base */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0; padding:0; }
		body {background-color:rgba(210, 214, 98, 0.5); 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:'Redressed', cursive; padding:6px; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		a {-webkit-transition: all 0.3s ease-in; -moz-transition: all 0.3s ease-in; -o-transition: all 0.3s ease-in; transition: all 0.3s ease-in; }
		img, input, textarea, select {max-width:100%; }
        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:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur {width:95%; min-width:800px; min-height:300px; margin:12px auto; background-color:#ffffff; color:#000000; border:1px solid #666666; }
		footer {margin-left:36px; }
 
		/* article */
		.conteneur {border-spacing:4px; }
		.ligne {display:table-row; }
		article {display:table-cell; text-align:left; vertical-align:top; border:1px dotted grey; } 
		/* article:nth-of-type(1) {width:400px; height:120px; } */
 
 
		/* -- */
		#products { font-size:0.8em; float:left; width: 300px; margin-right: 2em; }
		#cart { font-size:0.8em; width: 200px; float: left; }
		/* style the list to maximize the droppable hitarea */
		#cart ol { margin: 0; padding: 1em 0 1em 3em; }
		#btnPanier {margin:12px; }
		#dvjhSelectAllIDTShirt, #dvjhSelectAllIDBags, #dvjhSelectAllIDGadgets {font-size:0.8em; color:blue; text-decoration:none; }
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
		<section class="ligne">
			<article>
				<div id="products">
					<h1 class="ui-widget-header">Products</h1>	
					<div id="catalog">
						<h3><a href="#">T-Shirts</a></h3>
						<div>
							<ul>
								<li><a href="#" id="dvjhSelectAllIDTShirt">Select All</a></li>
								<li>Lolcat Shirt</li>
								<li>Cheezeburger Shirt</li>
								<li>Buckit Shirt</li>
							</ul>
						</div>
						<h3><a href="#">Bags</a></h3>
						<div>
							<ul>
								<li><a href="#" id="dvjhSelectAllIDBags">Select All</a></li>
								<li>Zebra Striped</li>
								<li>Black Leather</li>
								<li>Alligator Leather</li>
							</ul>
						</div>
						<h3><a href="#">Gadgets</a></h3>
						<div>
							<ul>
								<li><a href="#" id="dvjhSelectAllIDGadgets">Select All</a></li>
								<li>iPhone</li>
								<li>iPod</li>
								<li>iPad</li>
							</ul>
						</div>
					</div>
				</div>
			</article>
			<article>
				<div id="cart">
					<h1 class="ui-widget-header">Shopping Cart</h1>
					<div class="ui-widget-content">
						<ol id="dvjhPanierList">
							<li class="placeholder">Add your items here</li>
						</ol>
					</div>
				</div>
			</article>
			<article>
				<p>
					<button id="btnArticleUniquePanier">Pas d'article en double dans le Panier</button>
				</p>
				<p>
					<button id="btnContenuPanier">Contenu du Panier</button>
				</p>
				<p>
					<button id="btnVidePanier">Vide le Panier</button>
				</p>
			</article>
		</section>
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2011-09-08T01:05:00.000+02:00" pubdate>2011-09-07</time>
		<span itemprop="name">Daniel Hagnoul</span>
		<a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/i18n/jquery-ui-i18n.min.js"></script>
	<script charset="utf-8" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<script>	
		$(function(){
			/* -- */
			$( "#catalog" ).accordion();
 
			$( "#catalog li" ).draggable({
				appendTo: "body",
				helper: "clone"
			});
 
			$( "#cart ol" ).droppable({
				activeClass: "ui-state-default",
				hoverClass: "ui-state-hover",
				accept: ":not(.ui-sortable-helper)",
				drop: function( event, ui ) {
					var str = ui.draggable.text();
 
					// traitement du cas "Select All"
					if (str.localeCompare("Select All") != 0){
						$( this ).find( ".placeholder" ).remove();
						$( "<li></li>" ).text( str ).appendTo( this );
					}
				}
			}).sortable({
				items: "li:not(.placeholder)",
				sort: function() {
					// gets added unintentionally by droppable interacting with sortable
					// using connectWithSortable fixes this, but doesn't allow you to customize active/hoverClass options
					$( this ).removeClass( "ui-state-default" );
				}
			});
 
			var objPanier = $("#dvjhPanierList");
 
			// contenu du panier
			$("#btnContenuPanier").click(function(){
				// tab est un array
				var tab = objPanier.children("li").map(function(i, item){
					return $(item).text();
				}).get();
 
				console.log(tab.join(" | "));
			});
 
			// vide le panier
			$("#btnVidePanier").click(function(){
				objPanier.html('<li class="placeholder">Add your items here</li>');
			});
 
			// voir : http://www.developpez.net/forums/d1091953/webmasters-developpement-web/contribuez/suppression-multiples-tableau-array-alphanumerique/
			function dvjhUnique(tab){
				// SpaceFrog
				function replaceSpec(Texte){
					var TabSpec = {"à":"a","á":"a","â":"a","ã":"a","ä":"a","å":"a","ò":"o","ó":"o","ô":"o","õ":"o","ö":"o","ø":"o","è":"e","é":"e","ê":"e","ë":"e","ç":"c","ì":"i","í":"i","î":"i","ï":"i","ù":"u","ú":"u","û":"u","ü":"u","ÿ":"y","ñ":"n","-":" ","_":" "},
						reg=/[àáâãäåòóôõöøèéêëçìíîïùúûüÿñ_-]/gi;
 
					return Texte.replace(reg, function(){
						return TabSpec[arguments[0].toLowerCase()];
					}).toLowerCase();
				}
 
				// danielhagnoul
				tab.sort(function(a, b){
					var x = parseInt(a, 10),
						y = parseInt(b, 10),
						c1 = replaceSpec(String(a)),
						c2 = replaceSpec(String(b));
 
					if (isNaN(x) || isNaN(y)){
						if (c1 > c2){
							return 1;
						} else if(c1 < c2){
							return -1;
						} else {
							return 0;
						}
					} else {
						return(x - y);
					}
				});
 
				var i = tab.length;
 
				while(i-- > 1){
					if (tab[i] == tab[i - 1]){
						tab.splice(i, 1);
					}
				};
			}
 
			// Article unique, élimine les doublons
			$("#btnArticleUniquePanier").click(function(){
				// tab est un array
				var tab = objPanier.children("li").map(function(i, item){
					return $(item).text();
				}).get();
 
				dvjhUnique(tab);
 
				objPanier.empty();
 
				for (var i in tab){
					$( "<li></li>" ).text( tab[i] ).appendTo( objPanier );
				}
			});
 
			// traitement des dvjhSelectAllID
			$("[id^='dvjhSelectAllID']").click(function(){
				objPanier.find( ".placeholder" ).remove();
 
				$(this).parents("ul").children("li").map(function(i, item){
					if (i > 0){
						$( "<li></li>" ).text( $(item).text() ).appendTo( objPanier );
					}
				});
			});
 
			/* jPicker : http://www.digitalmagicpro.com/jPicker/, outil pour choisir rapidement une couleur */
			$.fn.jPicker.defaults.images.clientPath="http://danielhagnoul.developpez.com/lib/jPicker/images/";
			$(".conteneur").jPicker({window:{expandable:true,title:"jPicker : choissisez une couleur :",
			alphaSupport:true,position:{x:'screenCenter',y:'top'}},color:{ active:new $.jPicker.Color({ r: 210, g: 214, b: 98, a: 128 })}},
			function(color, context){var c = color.val("all");if (c){$("body").css("backgroundColor", "rgba(" +
			c.r + "," + c.g + "," + c.b + "," + (c.a/255).toFixed(2) + ")");}});
		});
	</script>
</body>  
</html>

**Shikiryu** · 08/09/2011, 08h14

Envoyé par Skytrancer

Yes ! Un grand merci pour la reponse

Mais j'aimerais bien un peu d'explication sur le fonctionnement du "ol.ui-droppable" du find

et sur le "push"

push est une méthode sur les Array en javascript (et qui existe dans pas mal de langage)
En gros, ça rajoute à la fin du tableau l' (ou les) élément(s) donné(s).
Un peu de doc ici : https://developer.mozilla.org/en/Jav...cts/Array/push

"ol.ui-droppable" est un selecteur comme en CSS. On cherche l'"ol" (liste ordonnée) ayant la classe ui-droppable associée.
Cette classe est ajoutée à l'élément dès qu'on lui applique la méthode .droppable() de jQuery UI. "ol.ui-droppable li" prend donc tous les "li" (élément de liste) enfants de ol.uidrappable, exactement comme en CSS.

**Nico_SAS** · 12/09/2011, 09h29

Bonjour daniel;

Je viens de tester ton code, hela j ai un petit soucis, n'ayant pas un "full acces" depuis mon poste de travail. J'ai donc remplacer les liens vers les biblio jq et jq ui mais en ce qui concernce les 2 references a http://danielhagnoul......ca me pose probleme.

Pourrais tu proposer une alternative ?
Et sinon est-ce le bouton contenu du panier qui est sensé faire le "select all" qui etait l'objet de ma requete.

Merci

**danielhagnoul** · 12/09/2011, 11h59

Bonjour

Vous pouvez supprimer les liens : http://danielhagnoul.developpez.com/...-1.1.6.min.css et http://danielhagnoul.developpez.com/...r-1.1.6.min.js ils ne sont pas utiles pour votre exemple.

Je me suis créé une page de test standard et ces liens (qui fonctionnent parfaitement) activent un plugin qui me permet de choisir rapidement une couleur rgba().

Chaque volet de l'accordéon à un lien du genre <li><a href="#" id="dvjhSelectAllIDTShirt">Select All</a></li> et il suffit de cliquer sur ce lien pour transférer tout le contenu du volet.

**Nico_SAS** · 12/09/2011, 13h26

oups autant pour moi je n'ai pas vu le select all dans l'accordéon, sorry

Merci

Cependant apres divers test je prefere la demo photo-manager qui a l'avantage de directement deplacer un element vers sa destination (trash) ou la remettre a sa position. J 'ai donc essayer d'adapter le code a cette demo...et ca fonctionne moyennement.

Please help.

merci

PS : je précise meme si l'on s'eloigne du sujet initial je suis l'auteur du sujet (skytrancer), le pseudo est different car c'etait celui de mon collegue.

Merci

**Nico_SAS** · 12/09/2011, 17h01

je me doute que le probleme vient de cette ligne mais j'ai du mal à la comprendre.

$("<li></li>").text($(item).text()).appendTo(objpanier);

Merci

**Nico_SAS** · 13/09/2011, 00h31

voila plus concretement tout mon code

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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
 
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title> Exo </title>
 
 
<link rel="stylesheet" type="text/css"
      href = "css/jquery-ui-1.8.16.custom.css">  </link>
 
<script type="text/javascript" src="js/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript" src="js/AlimListe.js"> </script>
 
<style>
/* drag and drop */
  	#gallery { float: left; width: 50%; min-height: 14em; } * html #gallery { height: 14em; } /* IE6 */
	.gallery.custom-state-active { background: #eee; }
	.gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
	.gallery li h5 { margin: 0 0 0.4em; cursor: move; }
	.gallery li a { float: right; }
	.gallery li a.ui-icon-zoomin { float: left; }
	.gallery li img { width: 100%; cursor: move; }
 
	#trash { float: right; width: 35%; min-height: 14em; padding: 1%;} * html #trash { height: 14em; } /* IE6 */
	#trash h4 { line-height: 16px; margin: 0 0 0.4em; }
	#trash h4 .ui-icon { float: left; }
</style>
</head>
<body>
 
<div id="ALL">
 
 
 
 
<div class="demo ui-widget ui-helper-clearfix ">
 
<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
	<li><a href="#" id="dvjhSelectAllIDTShirt">Select All</a></li>
	<li class="ui-widget-content ui-corner-tr">
		ADMIN
	</li>
	<li class="ui-widget-content ui-corner-tr">
		DEMOG
	</li>
	<li class="ui-widget-content ui-corner-tr">
		PASTA
	</li>
</ul>
 
<div id="trash" class="ui-widget-content ui-state-default">
	<h4 class="ui-widget-header"> Table Selectionné</h4>
	<div class="ui-widget-content">
	<li class="placeholder">Add your items here</li>
	</div>
</div>
</div><!-- End demo -->
</div>
</body>
</html>

et mon javascript appelé

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
 
 
 
$(document).ready( function() {
 
 
// DRAG AND DROP 
 
 
	$(function() {
 
		var $gallery = $( "#gallery" ),
			$trash = $( "#trash" );
 
		// let the gallery items be draggable
		$( "li", $gallery ).draggable({
			cancel: "a.ui-icon", // clicking an icon won't initiate dragging
			revert: "invalid", // when not dropped, the item will revert back to its initial position
			containment: $( "#demo-frame" ).length ? "#demo-frame" : "document", // stick to demo-frame if present
			helper: "clone",
			cursor: "move"
		});
 
		// let the trash be droppable, accepting the gallery items
		$trash.droppable({
			accept: "#gallery > li",
			activeClass: "ui-state-highlight",
			drop: function( event, ui ) {
				deleteImage( ui.draggable );
 
					var str = ui.draggable.text();
					// traitement du cas "Select All"
					if (str.localeCompare("Select All") != 0){
						$( this ).find( "#placeholder" ).remove();
						//$( "<li></li>" ).text( str ).appendTo( this );
					}
			}
 
		});
 
			var objPanier = $("#trash");
		// let the gallery be droppable as well, accepting items from the trash
		$gallery.droppable({
			accept: "#trash li",
			activeClass: "custom-state-active",
			drop: function( event, ui ) {
				recycleImage( ui.draggable );
			}
		});
 
		// image deletion function
		function deleteImage( $item ) {
			$item.fadeOut(function() {
				var $list = $( "ul", $trash ).length ?
					$( "ul", $trash ) :
					$( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );
 
				$item.find( "a.ui-icon-trash" ).remove();
				$item.appendTo( $list ).fadeIn(function() {
					$item
						.find( "img" )
							;
 
				var list = [];
				$('#trash').find('ul.gallery li').each(function(){
				list.push($(this).html());
				});
				/*alert("Table selectionnée : "+list);*/
 
				});
			});
 
		}
 
		// image recycle function
		function recycleImage( $item ) {
			$item.fadeOut(function() {
				$item
					.find( "a.ui-icon-refresh" )
						.remove()
					.end()
					.css( "width", "96px")
					.find( "img" )
					.end()
					.appendTo( $gallery )
					.fadeIn();
 
				var list = [];
				$('#trash').find('ul.gallery li').each(function(){
				list.push($(this).html());
				});
				/*alert("Table selectionnée : "+list);*/
 
			});
		}
 
 
		// resolve the icons behavior with event delegation
		$( "ul.gallery > li" ).click(function( event ) {
			var $item = $( this ),
				$target = $( event.target );
 
			if ( $target.is( "a.ui-icon-trash" ) ) {
				deleteImage( $item );
			} else if ( $target.is( "a.ui-icon-zoomin" ) ) {
				viewLargerImage( $target );
			} else if ( $target.is( "a.ui-icon-refresh" ) ) {
				recycleImage( $item );
			}
 
			return false;
		});
 
 
			$("[id^='dvjhSelectAllID']").click(function(){
				objPanier.find( ".placeholder" ).remove();
 
				$(this).parents("ul").children("li").map(function(i, item){
					if (i > 0){
						$( "<li></li>" ).text( $(item).text() ).appendTo( objPanier );
					}
				});
			});
	});
});

voila c'est pas extra, le select all ne me deplace pas mes cases (DEMOG PASTA ADMIN) mais creer une liste et reste toujours visible gauche.

J'aimerais que au clique sur select all, DEMOG ADMIN PASTA disparaisse de la zone de gauche et apparaissent a droite (sans doublons)

Merci pour votre aide

Recuperer une liste apres drag and drop (shopping-cart.html)

jQuery

Discussions similaires

Partager

Partager