Discussion :

[brian85]

Bonjour, je viens d'implémenter le plugin fullcalendar qui fait appel à jquery 1.3 et jquery-ui pour faire un agenda comme celui de google avec des drag and drop.

Ici il est question de limiter la possibilité de dropper les évènements, pour cela je récupère dans mes tableaux JSON les limites et cela fonctionne bien puisque les alertes marchent à chaque fois que je fais déborder un évènement,
le souci est de faire revenir l'évènement à sa place initiale.

voici le 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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
eventDrop: function(event, delta, minuteDelta, revert) {
 
 
			//alert(event.title + ' was moved ' + delta + ' days\n' + '(should probably update your database)');
			// On fait la requête Ajax du fichier "pages/ajaxupdate_planning_formateur.php" en ajoutant le delta à la date de début et de fin
			httpRequest('loading','pages/ajax_update_planning_formateur.php?delta_d_f='+delta+'&id_formateur_participe_stage='+event.id);
 
 
 
			// On vérifie les dates desession puis on recharge le contenu de la div que l'on vient de déplacer
			$("#calendar").delay(200,function(){
				$.getJSON(
				'https://intranet/pages/ajax_update_planning_on_event.php?id_formateur_participe_stage='+event.id,
				function(json){
 
					//On vérifie que la date de fin du drop n'est pas supérieure à celle de la session
 
					//les limites de la session
					var limitd = json.limit_d;
					var limitf = json.limit_f;
					// les valeurs de debut et de fin du drop
					var drop_start = json.start;
					var drop_end = json.end;
 
					//la regexp
					var reg = new RegExp("-","g");
 
					//on explose les date de limites pour comparer
					var tabd = limitd.split(reg);
					var tabf = limitf.split(reg);
					//on explose les dates du drop pour comparer
					var tabdd = drop_start.split(reg); 
					var tabdf = drop_end.split(reg);
 
					//les zones "dropables sont donc...
					/*
					for(i = tabd[2];i<=tabf[2];i++){
						$('.fc-day' + i + ' > .fc-day-content').droppable({accept:'fc-event'});
					}*/
 
 
					//on crée les objet dates pour les comparer 
					var limite_debut = new Date(tabd[0],tabd[1],tabd[2]);
					var limite_fin = new Date(tabf[0],tabf[1],tabf[2]);
 
					var drop_debut = new Date(tabdd[0],tabdd[1],tabdd[2]);
					var drop_fin = new Date(tabdf[0],tabdf[1],tabdf[2]);
 
					if(drop_debut.getTime() < limite_debut.getTime()){
						alert('Vous ne pouvez pas déplacer l\'intervention de ce formateur avant le début de la session');
						var elem = $('#' + event.id).draggable({
							cursor: "crosshair",
							revert: "valid"
						});
					}
						//alert($('#' + event.id).draggable.originalPosition);
						//$('#' + event.id).animate(this.originalPosition, 200);
						//revert();
 
 
					if(drop_fin.getTime() > limite_fin.getTime()){
						alert('Vous ne pouvez pas déplacer l\'intervention de ce formateur après la fin de la session');
						var elem = $('#' + event.id).draggable('option','revert','true');
						//alert($('#' + event.id).draggable.originalPosition);
						//$('#' + event.id).animate(this.originalPosition, 200);
						//revert();
					}
 
					$("#calendar").delay(100,function(){ // temoprisation pour éviter les pb de temps de maj de la base et d'affichage// On recharge l'event
 
						event.title = json.title;
						event.start = json.start;
						event.end = json.end;
						event.url = json.url;
 
						$('#calendar').fullCalendar('updateEvent',event);
					});
				});
			});
		}

j'ai pourtant mis l'option revert sur l'élément, mais rien n'y fait, pas d'erreur rien !

Merci d'avance à ceux qui prendront la peine de se pencher sur mon problème

[danielhagnoul]

Bonjour.

Je crois qu'il y a un petit problème ici :

Code :

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

var elem = $('#' + event.id).draggable('option','revert','true');

On doit utiliser le booléen true :

Code :

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

var elem = $('#' + event.id).draggable('option','revert',true);

[brian85]

Merci @ toi daniel mais cela ne fonctionne pas mon event ne revient pas à sa position initiale, je sèches totalement

j'ai essayé comme ceci :

Code :

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

var elem = $('#' + event.id).draggable('option','revert',true);

et comme ceci :

Code :

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

$('#' + event.id).draggable('option','revert',true);

Rien n'y fait mon alert précédent avant s'execute, donc ma condition du if est bien remplie, mais pas moyen de faire revenir cette div à sa place.

merci de ton aide.

[danielhagnoul]

Bonsoir.

Après avoir lu votre message, j'ai à nouveau regardé votre extrait de code et je viens seulement de voir que vous faites l'opération deux fois :

Code :

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

1
2
3
4
5
var elem = $('#' + event.id).draggable({
    cursor: "crosshair",
    revert: "valid"
});

et un peu plus loin :

Code :

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

1
2
 
var elem = $('#' + event.id).draggable('option','revert',true);

Je vous suggère de tester en effaçant le second et en modifiant le premier comme suit :

Code :

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

1
2
3
4
5
var elem = $('#' + event.id).draggable({
    cursor: "crosshair",
    revert: true
});

[brian85]

Tout d'abord, merci de votre aide.

Le code figure deux fois en effet car si l'on observe bien il y a une portion pour signaler que l'évènement est en dehors de la limite basse et affiche donc le message adéquate, et une pour la limite haute.

ceci dit j'ai essayé ton code Daniel et cela ne fonctionne toujours pas et ne provoque aucune erreur que je puisse détecter avec mon firebug.

Est-ce que c'est le fait de mettre ceci sur l'évènement eventDrop: qui fait que la div ne revient pas en place ?

Une autre idée ?

[danielhagnoul]

Bonjour.

Dans les deux cas il s'agit de $('#' + event.id) et du même event.id. Or un id doit être unique !

À ce propos, event.id représente-t-il bien l'objet draggable ?

Je ne connais pas encore le plugin fullcalendar, si j'ai assez de temps ce soir j'essaierai de le tester.