UI Draggable vers UI Sortable, élément invisible [contourné]
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:
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)
