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
|
// Fonction byId pour raccourcir la récupération d'un élément
function byId(id){
return document.getElementById(id);
}
var node = null;
// Liste des éléments sélectionnés, la méthode onSelected a été appellée
var selectedTab = new Array();
//Détection de l'enfoncement ou relachement de la touche Ctrl (pour la multisélection)
var isCtrl = false;
document.onkeyup=function(e) {
if(e.which == 17) {isCtrl=false;}
}
document.onkeydown=function(e){
if(e.which == 17) {isCtrl=true;}
}
/* Méthode permettant de redéfinir le style du marqueur par défaut qui s'affiche lorsque l'on peut déposer un élément au dessus ou au dessous d'un autre dans la liste*/
createCustomDropIndicator = function(element) {
var alertLeft , alertWidth ;
element.dropIndicator = document.createElement("div");
with (element.dropIndicator.style) {
position = "absolute";
zIndex = 999;
if(element.vertical){
borderLeftWidth = "2px";
borderLeftColor = "#369";
borderLeftStyle = "solid";
height = dojo.html.getBorderBox(element.domNode).height + "px";
top = dojo.html.getAbsolutePosition(element.domNode, true).y + "px";
}else{
borderTopWidth = "2px";
borderTopColor = "#369";
borderTopStyle = "solid";
width = (dojo.html.getBorderBox(element.domNode).width-50) + "px";
left = dojo.html.getAbsolutePosition(element.domNode, true).x + "px";
}
}
}
//Fonction initialisant les composants de DnD
function initDnd(){
var x ;
// Récupération de la liste source
var catalogNode = byId("catalogNode");
node = catalogNode.innerHTML;
// Création de la zone de DnD acceptant tout élément
var catalogTarget = new dojo.dnd.HtmlDropTarget(catalogNode, ["*"]);
// Surcharge de la méthode onDropEnd appelée à la fin d'un DnD d'un élément de cette liste
catalogTarget.onDropEnd = function(e) {
// Restauration de la liste telle qu'elle était à l'origine
catalogNode.innerHTML = node ;
// Re-création des éléments DnDropables de cette liste et de la liste destinataire (puisqu'elles ont changées)
setDradAndDrop(catalogNode, cartNode);
// Arrangement de la taille pour la scrollbar
setDradAndDropSize();
// Appel à la méthode "mère"
return dojo.dnd.HtmlDropTarget.prototype.onDropEnd.apply(this, arguments);
}
// Surcharge de la méthode de création du marqueur de DnD
catalogTarget.createDropIndicator=function() {
// Appel à la fonction créer plus haut
createCustomDropIndicator(this);
}
// Idem avec la liste cible
var cartNode = byId("cartNode");
var cartTarget = new dojo.dnd.HtmlDropTarget(cartNode, ["*"]);
cartTarget.onDrop = function(e) {
catalogNode.innerHTML = node ;
setDradAndDrop(catalogNode, cartNode);
setDradAndDropSize();
return dojo.dnd.HtmlDropTarget.prototype.onDrop.apply(this, arguments);
}
cartTarget.createDropIndicator=function() {
createCustomDropIndicator(this);
}
// Création des éléments de DnD dans les listes pour la première fois
setDradAndDrop(catalogNode, cartNode);
// Ajustement de la taille pour la scrollbar pour la première fois
setDradAndDropSize();
}
// Méthode qui récupère tous les éléments des deux listes et les rend DnDropables
function setDradAndDrop (ul, ul2) {
// Récupération des li de la liste source
var lis = ul.getElementsByTagName("li");
for(x=0; x<lis.length; x++){
// Création de l'objet HtmlDragSource
var toast = new dojo.dnd.HtmlDragSource(lis[x], "inStock");
// Surcharge de la méthode onSelected
toast.onSelected = function(e) {
// Appel à la méthode définie plus bas
dragAndDropSelected(this.dragObject);
}
// Surcharge de la méthode onDragStart
toast.onDragStart = function(e) {
// Changement de l'apparence de l'élément
this.dragObject.className = "dojoDndCopy" ;
// Rétablissement du fonctionnement de base
return dojo.dnd.HtmlDragSource.prototype.onDragStart.apply(this, arguments);
}
// Surcharge de la méthode onDragEnd
toast.onDragEnd = function(e) {
// Re-générer les élements de DnD des liste qui viennent d'être modifiées par un DnD
setDradAndDrop (ul, ul2);
// Désélectionner tous les éléments
for(i=0 ; i<selectedTab.length ; i++) {
if (selectedTab[i]!=null) {
selectedTab[i].className = "dojoDndItem" ;
}
}
selectedTab = new Array();
return dojo.dnd.HtmlDragSource.prototype.onDragEnd.apply(this, arguments);
}
}
// Idem pour la liste cible
if (ul2 != null) {
var lis2 = ul2.getElementsByTagName("li");
for(x=0; x<lis2.length; x++){
var toast2 = new dojo.dnd.HtmlDragSource(lis2[x], "inStock");
toast2.onSelected = function(e) {
dragAndDropSelected(this.dragObject);
}
toast2.onDragStart = function(e) {
this.dragObject.className = "dojoDndMove" ;
return dojo.dnd.HtmlDragSource.prototype.onDragStart.apply(this, arguments);
}
toast2.onDragEnd = function(e) {
this.dragObject.className = "dojoDndItem" ;
return dojo.dnd.HtmlDragSource.prototype.onDragEnd.apply(this, arguments);
}
}
}
}
// Gestion des éléments sélectionnés
// Si la touche Ctrl est enfoncée, il s'agit d'une multi-sélection, sinon
// c'est un élément unique qui est sélectionné
function dragAndDropSelected (dragObject) {
var i;
// Si la touche Ctrl n'est pas enfoncée ... sinon ...
if (!isCtrl) {
if (selectedTab.length!=0) {
// Si la liste des éléments sélectionné n'est pas vide
// On rétabli le style afin que ces éléments ne soient plus marqués
for(i=0 ; i<selectedTab.length ; i++) {
if (selectedTab[i]!=null) {
selectedTab[i].className = "dojoDndItem" ;
}
}
// On vide cette liste
selectedTab = new Array();
}
// Marqueur de sélection pour un seul élément dans le tableau
selectedTab[0] = "UNIQ" ;
// Marquer le style de l'élément sélectionné
dragObject.className = "dojoDndItemSelected" ;
// Ajouter cet élément à la liste
selectedTab[1] = dragObject ;
} else {
// Si le liste contenait une sélection unique (pas une multi-sélection)
// On désélectionne cet élément
if (selectedTab[0]=="UNIQ") {
for(i=0 ; i<selectedTab.length ; i++) {
selectedTab[1].className = "dojoDndItem" ;
}
selectedTab = new Array();
}
// On marque l'élément présent comme sélectionné
dragObject.className = "dojoDndItemSelected" ;
// On ajoute l'élément sélectionné présentement à la fin de la liste
selectedTab[selectedTab.length] = dragObject ;
}
}
// Ajustement de la taille de la liste dans les composants parents pour faire apparaitre une scrollbar
function setDradAndDropSize () {
// Récupération de la taille disponible dans l'écran pour l'affichage de la liste
var tailleTot = getTailleTotal() ;
var divCatalogContainer = byId("catalogContainer");
var divCartContainer = byId("cartContainer");
var divCatalogList = byId("cataloglist");
var divCartList = byId("cartlist");
var catalogNode = byId("catalogNode");
var cartNode = byId("cartNode");
// Récupération de la hauteur de la liste en comptant son nombre d'éléments multiplié par leur hauteur
var hauteur = (catalogNode.getElementsByTagName("li").length*24);
// Si cette taille est inférieure à la taille disponible, alors prend tout l'espace disponible afin de pouvoir DnD "dans le vide"
if (hauteur<tailleTot-15){
hauteur = tailleTot-45;
}
catalogNode.style.height = hauteur+"px";
// Idem
hauteur = (cartNode.getElementsByTagName("li").length*24);
if (hauteur<tailleTot-15){
hauteur = tailleTot-55;
}
cartNode.style.height = hauteur+"px";
// Ajustement de la taille des contenants, là c'est à chacun de tester
divCatalogContainer.style.height=(tailleTot+15) + "px";
divCartContainer.style.height=(tailleTot+15) + "px";
divCatalogList.style.height=(tailleTot-15) + "px";
divCartList.style.height=(tailleTot-15) + "px";
} |
