Bonjour,

Je me suis inspirer du tutoriel pour faire une liste draggable que l'on peut trouver ici:

http://www.guillaumevoisin.fr/jquery...ste-des-taches

Après plusieurs modification j'obtient presque ce que je souhaite, en effet mon problème vient du fait que je souhaite récupérer le texte des éléments de ma liste hors quand je fais cela je me retrouve bien avec le texte mais avec d'énorme espace blanc de toute part.

J'ai déjà tenté le .replace() et .toString() sans succès

Si quelqu'un à une solution se serais sympa.

Et voici bien sûr mon code^^
Code html : 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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Shopping List JQuery</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
		<!-- Cascading Style Sheets -->
		<link href="style.css" rel="stylesheet" type="text/css" />
		<!-- Javascript -->
		<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
		<script type="text/javascript" src="js/jquery.shoppingList.js"></script>
		<script type="text/javascript" src="js/script.js"></script>
	</head>
 
	<body>
 
 
 
		<div class="shoppingList">
			<ul>
			<li class="rs-Sub-Menu">texte 01<div class=subMenu>
				<!--Barre de slide a associer à la couche altitue-->	 
					<span style="display: inline-block;"><input id="slid_alti" type="slider" name="price" value="50" /></span> 
				</div>
			</li>
 
 
		<li class="rs-Sub-Menu">
			<span id="label_reseauF">text 02</span>
				<div class=subMenu>
					<!--Barre de slide a associer à la couche réseaux ferroviaire-->
					<span style="display: inline-block;"><input id="slid_reseauF" type="slider" name="price" value="50" /></span> 
				</div>
		</li>					
 
 
 
			</ul>
	<div>toto</div>
		</div>
 
 
	</body>
 
</html>

Pour les apelles de fichier js je vous invite à vous référer au liens car je n'ai modifier que le fichier js intitulé jquery.shoppingList.js, dont voici avec mes modifications

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
/**
 * JQuery Shopping List ( http://tuts.guillaumevoisin.fr/jquery/shoppingList/ ) 
 * Copyright (c) Guillaume Voisin 2010
 */
 
(function($){
	$.fn.shoppingList = function(options) {
 
		// Options par defaut
		var defaults = {};
 
		var options = $.extend(defaults, options);
 
		this.each(function(){
 
			var obj = $(this);
 
			// Empêcher la sélection des éléments à la sourirs (meilleure gestion du drag & drop)
			var _preventDefault = function(evt) { evt.preventDefault(); };
			$("li").bind("dragstart", _preventDefault).bind("selectstart", _preventDefault);
 
			// Initialisation du composant "sortable"
			$(obj).sortable({
				axis: "y", // Le sortable ne s'applique que sur l'axe vertical
				containment: ".shoppingList", // Le drag ne peut sortir de l'élément qui contient la liste
				handle: ".item", // Le drag ne peut se faire que sur l'élément .item (le texte)
				distance: 10, // Le drag ne commence qu'à partir de 10px de distance de l'élément
				// Evenement appelé lorsque l'élément est relaché
				stop: function(event, ui){
					// Pour chaque item de liste
					$(obj).find("li").each(function(){
 
						//$(this).find(".item").unbind('click');
						// On actualise sa position
						index = parseInt($(this).index()+1);
						// On la met à jour dans la page
						$(this).find(".count").text(index);
 
                                 //C'est ici que cela bloque
 
						var toto=$(this).text().toString();
						var tata=$(this).html().toString();
						console.log(toto+tata);
 
					});
 
				}
 
			});
 
			// Initialisation du composant Droppable
			$(obj).droppable({
				// Lorsque l'on relache un élément sur la poubelle
				drop: function(event, ui){
					$(this).find(".item").bind("click");
				},
				// Lorsque l'on passe un élément au dessus de la poubelle
				over: function(event, ui){
					$(this).find(".item").unbind("click");
				},
				// Lorsque l'on quitte la poubelle
				out: function(event, ui){
					console.log("titi");
				}
			})
 
 
			// Pour chaque élément trouvé dans la liste de départ
			$(obj).find("li").each(function(){
 
 
				// On ajoute les contrôles
				addControls($(this));
			});
 
		});
 
 
 
 
/*
		* Fonction qui ajoute les contrôles aux items
		* @Paramètres
		*  - elt: élément courant (liste courante)
		*
		* @Return void
		*/
 
		function addControls(elt)
		{	
 
 
 
 
 
			// On ajoute en premier l'élément textuel
			$(elt).html("<span class='item'>"+$(elt).text()+"</span>");
 
			// Puis l'élément de position
			//var toto=parseInt($(elt).index()+1);
 
			//$(elt).prepend('<span class="count">'+toto+'</span>');
 
				$(this).find(".item").bind("click");
			// Au double clic sur le texte, ici si on peu y incorporer le slid menu si besoin
			$(elt).find(".item").click(function(){
				txt = $(".item").html();
				console.log(txt);
			})
 
 
 
		}
 
		// On continue le chainage JQuery
		return this;
	};
})(jQuery);
Merci d'avance pour votre aide