UI Draggable vers UI Sortable, élément invisible [contourné] [Résolu]

Feng-Huang · 19/04/2011, 16h25

Bonjour,

Voici le contexte : je propose à mes utilisateurs d'ajouter des questions à un questionnaire déjà existant. Les questions déjà présentes ne peuvent être supprimées, mais peuvent-être ordonnées.

A partir d'un champ <select> multiple, je construis deux listes : questions du questionnaire en cours de construction (newUL), questions disponibles non-présentes dans le questionnaire en cours de construction (availableUL).

Les éléments de availableUL peuvent être déposé dans newUL, et ordonnés.
Les éléments de newUL nouvellement ajoutés ne peuvent -pour l'instant- être enlevé de la liste et redéposé dans availableUL (c'est prévu, mais c'est hors sujet)

En l'état actuel, lorsque je sélectionne un élément de availableUL et que je souhaite le déposer dans newUL, dès qu'il quitte (visuellement) availableUL, il devient invisible. Lorsqu'on le dépose (on voit la place se créer dans la liste) sur newUL, il apparait alors du coin supérieur gauche du document et vient se placer correctement dans newUL.

Le problème est donc : pourquoi cet élément devient invisible, et comment le garder sous nos yeux.

Voici le code utilisé :

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
<script type="text/javascript">
	$(function(){
		$("form").hide();
 
		var defaultPosition = new Array();
 
		$("form option").each( function(){
 
			defaultPosition[$(this).val()] = $(this).index();
		});
 
		/* Création des blocs principaux */
 
		doc = $('body');
		newUL = $('<ul></ul>');
		newUL.addClass('ui sortable');
 
		availableUL = $('<ul></ul>');
		availableUL.addClass('ui sortable');
 
		widget = $('<div></div>');
		widget.css({
			"heigth": "520px"
		});
		widget.resizable();
 
		widget.append(newUL).append(availableUL);
		doc.append(widget);
 
		/* Création de la liste des questions choisies (+questions par défaut) */
		$("form option:selected").each( function(){
 
			option = $(this);
 
			var li = $('<li rel="'+option.val()+'">'+option.text()+'</li>');
			li.addClass('ui-state-default');
			if(option.attr('rel') != 'removable'){
				li.addClass('ui-state-disabled');
			}
			newUL.append(li);
		});
 
		/* Création de la liste des questions disponibles */
 
		$("form option:not(:selected)").each( function(){
 
			option = $(this);
 
			var li = $('<li rel="'+option.val()+'">'+option.text()+'</li>');
			li.addClass('ui-state-default');
			availableUL.append(li);
		});
 
		/* Drag & Sort */
 
		availableUL.find('li').draggable({
			connectToSortable: newUL,
			revert: true,
			stack: doc
		}).disableSelection();
 
		newUL.sortable({
			revert: true,
			cancel: ".ui-state-disabled",
			forcePlaceholderSize: true
		}).disableSelection();
 
	});
</script>
 
<form method="post" >
<select name="question_id[]" style="width: 90%; height: 500px" multiple="multiple" class="multiselect">
	<option rel="removable" value="1">Accessibilité téléphonique</option>
	<option rel="removable" value="2">Accessibilité des produits</option>
	<option rel="removable" value="3">Qualité de l'accueil</option>
	<option rel="removable" value="4">Adaptabilité aux besoins clients</option>
	<option rel="removable" value="5">Aide au démarrage fournie par votre tête de réseau</option>
 
	<option rel="removable" value="6">Aide à la négociation</option>
	<option rel="notRemovable" value="7" selected="selected">Accueil téléphonique</option>
	<option rel="removable" value="8">Amabilité de votre interlocuteur</option>
	<option rel="removable" value="9">Amabilité du personnel</option>
	<option rel="removable" value="10">Ambiance dans établissement</option>
	<option rel="removable" value="11">Assistance à l'entreprise lors des contrôles de l'administration</option>
 
	<option rel="removable" value="12">Atteinte des objectifs prévus</option>
	<option rel="removable" value="13">Attention de l'équipe du bloc opératoire</option>
	<option rel="removable" value="14">Attention réservée à vos proches</option>
	<option rel="removable" value="15">Calme dans le service de jour</option>
	<option rel="removable" value="16">Calme dans le service de nuit</option>
	<option rel="removable" value="17">Capacité des équipements</option>
 
	<option rel="removable" value="18">Capacité d'innovation</option>
	<option rel="removable" value="19">Les biens présentés correspondaient ils à vos attentes</option>
	<option rel="notRemovable" value="20" selected="selected">Choix des produits  proposés</option>
	<option rel="removable" value="21">Choix des produits loués</option>
	<option rel="removable" value="22">Choix des services proposés</option>
	<option rel="removable" value="23">Choix du parc VO</option>
</select>
<input type="submit" value="Enregistrer" />
</form>

EDIT : suppression du langage serveur, remplacement par un échantillon du résultat (le vrai résultat comporte plus de 400 lignes)

Feng-Huang · 20/04/2011, 14h44

J'ai avancé sur le reste des fonctions :

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
<script type="text/javascript">
	var defaultPosition = new Array();
 
	$(function(){
		$("form").hide();
 
		$("form select option").each( function(){
 
			defaultPosition[$(this).val()] = $(this).index();
		});
 
		/* Création des blocs principaux */
 
		doc = $('body');
 
		newUL = $('<ul><h3 class="ui-widget-header">Votre questionnaire</h3></ul>');
		availableUL = $('<ul><h3 class="ui-widget-header">Questions disponibles</h3></ul>');
 
		$(newUL).add(availableUL).addClass('ui sortable').css({
			'width': '45%',
			'float': 'left',
			'overflow-y':'hidden'
		});
 
		widget = $('<div></div>');
		widget.addClass('ui-widget-content .ui-helper-clearfix');
		widget.css({
			'heigth': '520px',
			'overflow': 'scroll'
		}).resizable();
 
		widget.prepend(availableUL).prepend(newUL);
		doc.append(widget);
 
		/* Création de la liste des questions choisies (+questions par défaut) */
 
		$("form option:selected").each( function(){
 
			option = $(this);
 
			var li = $('<li rel="'+option.val()+'">'+option.text()+'</li>');
			li.addClass('ui-state-default');
			if(option.attr('rel') != 'removable'){
				li.addClass('ui-state-disabled');
			}
			newUL.append(li);
		});
 
		/* Création de la liste des questions disponibles */
 
		$("form option:not(:selected)").each( function(){
 
			option = $(this);
 
			var li = $('<li rel="'+option.val()+'">'+option.text()+'</li>');
			li.addClass('ui-state-default');
			availableUL.append(li);
		});
 
		/* Drag & Sort */
 
		newUL.sortable({
			forcePlaceholderSize: true,
			placeholder: "ui-state-highlight",
			cursorAt: { cursor: "move" },
			revert: true,
		}).disableSelection();
 
		availableUL.find('li').draggable({
			cursorAt: { cursor: "move" },
			connectToSortable: newUL,
			stack: doc
		}).droppable({
 
			accept: ":not(.ui-state-disabled)",
			drop: function( event, ui ) {
 
				backElement = $('<li></li>');
				backElement.text(ui.draggable.text());
				backElement.addClass('ui-state-default');
				value = ui.draggable.attr('rel');
				index = defaultPosition[value];
				backElement.insertBefore(availableUL.find('li:eq('+(index)+')'));
				setTimeout(function() { ui.draggable.remove(); },1); // workaround
			}
 
		}).disableSelection();
	});
</script>

J'ai remarqué qu'en utilisant le helper "clone" , le problème était partiellement résolu, et qu'en définissant le reverse à false le problème était totalement résolu. Le soucis c'est que je ne veux pas cloner l'élément. Alors est-ce que je dois faire un workaround et après drop supprimer l'élément d'origine (comment faire?) ou est-ce qu'il y a une solution correcte à appliquer ?

danielhagnoul · 20/04/2011, 23h54

Bonsoir

Si j'ai bien compris, vous utilisez UI Sortable et UI Draggable et vous cherchez à obtenir quelque chose comme l'exemple ci-dessous ?

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>
<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; }
 
		/* Sujet en cours */
		.drag, #sortable { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
		.drag li, #sortable li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
		<ul class="drag">
			<li class="ui-state-default">Item 1</li>
			<li class="ui-state-default">Item 2</li>
			<li class="ui-state-default">Item 3</li>
			<li class="ui-state-default">Item 4</li>
			<li class="ui-state-default">Item 5</li>
		</ul>
		<ul id="sortable">
			<li class="ui-state-highlight">Item 1</li>
			<li class="ui-state-highlight">Item 2</li>
			<li class="ui-state-highlight">Item 3</li>
			<li class="ui-state-highlight">Item 4</li>
			<li class="ui-state-highlight">Item 5</li>
		</ul>
	</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(){
 
			$("#sortable").sortable();
 
			$("ul.drag li").draggable({
				helper:"clone",
				connectToSortable:"#sortable"
			});
		});
	</script>
</body>  
</html>

Feng-Huang · 21/04/2011, 02h33

Bonjour,

L'exemple que vous m'avez donné est trouvable dans la la doc JQuery UI.
La différence avec ce que je cherche est le fait de pouvoir faire retourner dans la liste 1 (à gauche dans votre exemple) l'élément déposé dans la liste 2 (à droite dans votre exemple), à son emplacement d'origine.

Le problème est la disparition de l'élément draggrable au moment du drag (comme signalé dans mon premier post). Comme si l'offset avait été défini à Left+500 et Top+300 (sachant que j'ai essayé de définir l'offset du curseur, sans que cela soit fructueux).

L'utilisateur du helper clone résoud le problème de disparition mais en créé un autre (comme mentionné dans mon second post).

J'ai finalement trouvé un contournement satisfaisant (bien que je pense qu'il nuit quelque peut aux performances).

Ici est mon contournement :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
	<title>Questionnaire</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="Content-Language" content="fr" />
	<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>
	<script type="text/javascript"src="js/jquery-ui-1.8.11.custom.min.js"></script>
 
	<link href="css/jquery-ui-1.8.11.custom.css" rel="stylesheet" type="text/css"/>
	<script type="text/javascript" src="js/highcharts.js"></script>
	<script type="text/javascript"src="js/uidatepicker-fr.js"></script>
	<style>
		div#chart {
			margin: auto;
			margin-top: 50px;
			width: 800px;
			height: 480px;
		}
 
		h1 {
			color: red;
			font-weight: bold
		}
	</style>
		</head>
<body>
 
 
 
<script type="text/javascript">
	var defaultPosition = new Array();
 
	$(function(){
		$("form").hide();
 
		$("form select option").each( function(){
 
			defaultPosition[$(this).val()] = $(this).index();
		});
 
		/* Création des blocs principaux */
 
		doc = $('body');
 
		newUL = $('<ul id="new"><h3 class="ui-widget-header">Votre questionnaire</h3></ul>');
		availableUL = $('<ul id="available"><h3 class="ui-widget-header">Questions disponibles</h3></ul>');
 
		$(newUL).add(availableUL).addClass('ui sortable').css({
			'width': '45%',
			'float': 'left',
			'overflow-y':'hidden'
		});
 
		widget = $('<div></div>');
		widget.addClass('ui-widget-content .ui-helper-clearfix');
		widget.css({
			'heigth': '520px',
			'overflow': 'scroll'
		}).resizable();
 
		widget.prepend(availableUL).prepend(newUL);
		doc.append(widget);
 
		/* Création de la liste des questions choisies (+questions par défaut) */
 
		$("form option:selected").each( function(){
 
			option = $(this);
 
			var li = $('<li rel="'+option.val()+'">'+option.text()+'</li>');
			li.addClass('ui-state-default');
			if(option.attr('rel') != 'removable'){
				li.addClass('ui-state-disabled');
			}
			newUL.append(li);
		});
 
		/* Création de la liste des questions disponibles */
 
		$("form option:not(:selected)").each( function(){
 
			option = $(this);
 
			var li = $('<li rel="'+option.val()+'">'+option.text()+'</li>');
			li.addClass('ui-state-default');
			availableUL.append(li);
		});
 
		/* Drag & Sort */
 
		newUL.sortable({
			forcePlaceholderSize: true,
			placeholder: "ui-state-highlight",
			cursorAt: { cursor: "move" },
			revert: true,
		}).disableSelection();
 
		availableUL.find('li').draggable({
			cursorAt: { cursor: "move" },
			connectToSortable: newUL,
			stack: doc,
			helper: "clone",
			stop: function(event, ui){
				if(newUL.find('li[rel='+$(this).attr('rel')+']').length == 1){
					//availableUL.find('li[rel='+$(this).attr('rel')+']').addClass('ui-state-disabled').draggable('disable');
					availableUL.find('li[rel='+$(this).attr('rel')+']').hide();
				}
			}
		}).droppable({
			accept: "#new li",
			drop: function( event, ui ) {
 
				//availableUL.find('li[rel='+ui.draggable.attr('rel')+']').removeClass('ui-state-disabled').draggable('enable');
				availableUL.find('li[rel='+ui.draggable.attr('rel')+']').show();
				setTimeout(function() { ui.draggable.remove(); },1); // workaround
			}			
		}).disableSelection();
	});
</script>
 
<form method="post" >
<select name="question_id[]" style="width: 90%; height: 500px" multiple="multiple" class="multiselect">
	<option rel="removable" value="1">Accessibilité téléphonique</option>
	<option rel="removable" value="2">Accessibilité des produits</option>
	<option rel="removable" value="3">Qualité de l'accueil</option>
	<option rel="removable" value="4">Adaptabilité aux besoins clients</option>
	<option rel="removable" value="5">Aide au démarrage fournie par votre tête de réseau</option>
 
	<option rel="removable" value="6">Aide à la négociation</option>
	<option rel="notRemovable" value="7" selected="selected">Accueil téléphonique</option>
	<option rel="removable" value="8">Amabilité de votre interlocuteur</option>
	<option rel="removable" value="9">Amabilité du personnel</option>
	<option rel="removable" value="10">Ambiance dans établissement</option>
	<option rel="removable" value="11">Assistance à l'entreprise lors des contrôles de l'administration</option>
 
	<option rel="removable" value="12">Atteinte des objectifs prévus</option>
</select>
<input type="submit" value="Enregistrer" />
</form>
 
 
</body>
</html>

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