[IE] bug div qui suit curseur

Invité · 04/03/2009, 16h38

Bonjour

J'ai un problème avec IE (testé sous 7 et 8bêta) mais pas avec firefox (rien d'étonnant...), mais il faudrait que ca marche sous IE aussi

exemple grandeur nature : http://91.121.135.179/iut/
code css entier : http://91.121.135.179/iut/style.css

Donc le bug survient lorsqu'on déplace un "évenement" (drag n drop), le bloc div est censé suivre le curseur, sous firefox pas de problème, mais sous IE la div reste bloquée en haut de la page comme si y'avait un mur l'empechant de passer

voilà le morceau de page correspondant :

Code xhtml :

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

1
2
3
4
5
6
7
8
 
<div class="frame_principale">
        <!-- [...] -->
	<div id="temp"></div>
	<div id="planning">
        <!-- [...] -->
	</div>
</div>

div id="temp" est une div temporaire où je met ma div qui suit le curseur, le temps de déplacement de la div (je l'utilise car sinon ca fait un bug d'affichage sous firefox et sous ie).

A noter que le drag n drop marche sous IE, c'est juste que la div ne suit pas correctement le curseur, car sinon la div se pose bien là où on veut.

dans div id planning, j'ai des lignes d'evenement de ce type :

Code xhtml :

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

1
2
3
4
5
6
7
 
<div class="item" id="cam_1" onMouseUp="onMouseUpSurEvenements(this)">			
    <div class="nom">CAMION 1</div>
    <div class="evenements">
    <!-- [...] -->
    </div>
</div>

et c'est donc dans div class="evenements" qu'il y a les événements déplacables sous cette forme :

Code xhtml :

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

1
2
 
<div class="evenement" id="1" style="margin-left: 611px; width: 413px;" onmousedown="bougerEvenement(this)">livraison R4E4</div>

et voilà le code CSS associé au partie donnée ci dessus :

Code css :

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
 
*
{
	margin : 0px;
	padding :0px;
}
 
.frame_principale
{
	background-color : pink;
	width:100%;
	height:100%;
	margin : 0;
	display:block;
}
 
/*** Planning ***/
 
#planning
{
	width:99.9%;
	z-index:0;
	position:relative;
	display:block;
	overflow : auto;
	height : 90%;
}
 
.item
{
	position : relative;
	display:block;
	margin-bottom:1px;
	height:40px;
	width:99.9%;
	z-index:0;
}
 
.nom
{
	background-color:#5588FF;
	color:white;
	display:block;
	width:199px;
	position:absolute;
	height:40px;
	z-index:0;
}
 
.evenements /* tous les évenements */
{
	background-color:#AAAAFF;
	color:white;
	left:200px;
	position:absolute;
	display:block;
	width:100%;
	height:40px;
	z-index:0;
}
 
.evenement /*un evenement */
{
	position : absolute;
	z-index:2;
 
	height:40px;
	background-color:#1188FF;
	opacity:0.7;
}

chaque évenement est affiché via javascript, mais je ne pense pas que le javascript soit en cause ici. (au pire si ca vous amuse vous pouvez regarder les fichiers JS XD)

**Bisûnûrs** · 04/03/2009, 16h44

Je pense au contraire que ton problème vient de Javascript, étant donné que le div suit bien le curseur quand ce dernier se ne se trouve pas au-dessus du tableau principal.

Invité · 04/03/2009, 17h02

si tu le dis ^^

mais là par contre il va falloir que tu me dise quoi dans le JS pose problème car je ne vois pas du tout lol

bon comme tu a déplacer dans le forum JS je donne le code du fichier dragndrop.js, je pense que c'est dans celui qu'il y'a un probleme :
il y'a aussi le fichier fonctions.js, mais celui ne contient que les fonction pour redimensionner les objets à la taille du navigateur,et les fonctions d'ajout/suppression d'évenements

logiquement les commentaires devraient être suffisant pour comprendre mon code

Code javascript :

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
 
var divEvenement = null;
 
 
/********************************/
/* Pour désactiver la selection */
/********************************/
function disableselect(){
	return false;
}
 
function reEnable(){
	return true;
}
 
//if IE4+
document.onselectstart=new Function ("return false");
 
//if NS6
if (window.sidebar){
	document.onmousedown=disableselect;
	document.onclick=reEnable;
}
 
if (navigator.appName.substring(0,3) == "Net") {document.captureEvents(Event.MOUSEMOVE)};
document.onmousemove = getPosXCurseur;
 
//Var qui permet de savoir si on est entrain de déplacer un evenement
var deplacementDiv = false;
 
 
//Position de la souris par rapport à la div évenements
var posxcurseur=0;
 
 
/******************/
function getPosXCurseur(e){
//On récupère la position du curseur
x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
 
//On récupère la largeur d'un item
    var mes_div = document.getElementsByTagName("div");
    for (var i = 0; i < mes_div.length; i++)
    {	    
	    var div = mes_div.item(i);
	    if (div.className  == "nom")
	    {
		   var largeurItem = div.offsetWidth;
	    }
    }
 
 
	posxcurseur = (x - largeurItem);
	var posXcurseurEcran = x;
	var posYcurseurEcran = y - 40;	//pour que la div apparaisse au niveau du curseur et non juste en dessous
 
	//pour déplacer la div, uniquement dans le cas ou on veut deplacer la div
	if(deplacementDiv)
	{
		divEvenement.style.marginLeft = "0px";
		divEvenement.style.marginTop = "0px";
		divEvenement.style.paddingTop = "0px";
		divEvenement.style.left = posXcurseurEcran+"px";
		divEvenement.style.top = posYcurseurEcran+"px"
 
	}	
	posxcurseur = (x - largeurItem);
}
 
 
function bougerEvenement(div)
{
	//On est en train de déplacer la div
	deplacementDiv = true;
 
	//on fait une copie de notre évenement
	var clone = div.cloneNode(true);
	//On ajoute le clone à la div temporaire
	divEvenement = document.getElementById("temp").appendChild(clone);
 
	//on enleve la div originale de la ligne où elle était vu qu'on mi sa copie dnas la div temporaire
	enleverEvenement(div);	
}
 
 
function onMouseUpSurEvenements(divItem)
{
	if(divEvenement != null)
    {
		//On récupère le propriétés CSS
		var id = divEvenement.id;
		var marginLeft = divEvenement.style.marginLeft;
		var longueur = divEvenement.offsetWidth;
		var contenu = divEvenement.innerHTML;
 
		//On ajoute l'évenement à la ligne voulue
		ajouterEvenementPx(divItem.id,id,posxcurseur,longueur,contenu);
		//On a fini de déplacer la div
		deplacementDiv = false;
		//On enleve la div Evenement de la div temporaire
		enleverEvenement(divEvenement);
		//On met div à null car il n'y a plus de div en déplacement
		divEvenement = null;
    }
}