[POO] redimensionner div + détecter fin redimensionnement

Version imprimable

03/11/2008, 10h11
franfr57

[POO] redimensionner div + détecter fin redimensionnement

Bonjour,

Je cherche a détecter la fin du redimensionnement d'un div...
Jusqu'à maintenant j'appelle une fonction leaveAllAction dans l'événement onmouseup du body.

Cependant, je viens de remarquer que parfois en allant vite j'arrive à cliquer pour redimensionner relacher la souris rapidement et tandis que le clic de la souris est relacher je peux encore étendre mon div...
Ma métode ne fonctionne plus dans ce cas...

Merci pour votre aide
03/11/2008, 10h14
le_chomeur

un code peut-être ??
03/11/2008, 10h23
franfr57

Voila le scrip de redimenssionnement dont je me suis inspiré :

http://www.madiot.info/redim/

J'arrive à faire apparaître le problème quand je redimensionne sur le côté gauche vers la droite (reduit le carré) et que je vais très rapidement.
Mais parfois cela arrive sans que j'aille rapidement (mais rarement).
D'ailleurs j'ai du mal à reproduire le problème, il faut que je m'y reprenne une dizaine de fois...

Cependant le problème est là et je souhaite le corriger.
Je ne sais pas trop d'où il vient...
Peut être car j'utilise l'événement onmouseup du body et que ce n'est pas forcément bon.
Je ne vois pas comment détecter la fin du redimensionnement autrement
03/11/2008, 10h30
le_chomeur

ha vi , problème apparut sous FF3 avec la gestion des évènements :)
Inspire toi de mon script de drag and drop dans les contributions , pour libérer les évènements ( TRES simple tout est commenté ! )

http://www.developpez.net/forums/d63...op-delimiteur/
03/11/2008, 11h31
franfr57

Je ne comprends pas trop pourquoi il faut libérer les événements?

Moi le problème que je décris apparait sur IE (pas tester sous FF).

Je me demander si je ne devais pas ajouter quelque chose à mon code?

Ce que je veux dire c'est que avec mon script de redimensionnement il est possible par une manip rapide de la souris de pouvoir redimensionner alors que l'on a relacher le clic de la souris... C'est là mon problème. Car mon événement est appellé quand on relache la souris.

Merci pour votre aide
03/11/2008, 12h00
le_chomeur

pour 2 raisons :

- bug FF 3
- bug FF 3 ^^

j'avais le problème sous FF uniquement sous ie 6/7 les évènements étaient bien libéré mais lorsque l'on relachais la souris , je pouvais continuer a draguer mes éléments ...

DONC

appuis toi sur mon code pour libérer ton évènement :)

sinon gère le onmouseup sur le document et non pas sur ta div ;)
03/11/2008, 12h02
franfr57

Le onmouseup est bien géré sur document (body).
Je vais essayer de faire comme toi, j'espère que cela fonctionnera!

Sous firefox, je n'ai pas ce problème enfin je n'ai pas réussi du tout à le reproduire!

Peut être est le window.event de IE qui à un problème? Mais je ne comprend pas trop...

Le bug apparait principalement lorsque je vais sur un autre objet redimensionnable (j'ai un panneau sens interdit qui apparait même...) ou lorsque je clic pour redimensionner et que je bouge rapidement la souris...
03/11/2008, 14h16
franfr57

par contre je ne peux pas vraiment de faire de fonction init en appelant mes objets car j'ai certains div qui portent plusieurs fois les même nom...
N'exciste t'il pas un événement comme onLoad du body pour un div?
03/11/2008, 14h23
le_chomeur

le même nom ? si tu parles du même id = GROSSE ERREUR !!
un id doit être unique

conseil :
au click SUR la div , passe this en paramètre :)
03/11/2008, 14h35
franfr57

Si je rajoute document.onmouseup = leaveAllAction(); dans ma fonction moveAction, j'ai le message javascript suivant :

Non implémenté

Est ce normal?
Je dois aussi faire toute une classe?
03/11/2008, 14h44
le_chomeur

montre nous TON code :)

J'ai réussi en mettant entre guillemet :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
function moveAction(p_obj,e){
	document.onmousemove = "moveAllAction(event)";
	document.onmouseup	= "leaveAllAction()";
	if(isClicked == false){
		modifCurseur(p_obj, e);
	}
}
 
...
 
function leaveAllAction(){
	document.onmousemove = null;
	document.onmouseup   = null;
	if (isClicked) {
		isClicked = false;
		objectToDrag.style.zIndex = 0;
	}
}

Mais cela ne résoud pas le problème...

03/11/2008, 14h51
franfr57
Je crois que cela ne fonctionne pas car si je fais dans mes 2 fonctions :
Code:

1 2 3 document.onmousemove = null; document.onmouseup = null;
le redimentionnement fonctionne toujours alors qu'il ne devrait marché qu'une fois.

Et en faisant comme précédemment si j'enlève les événement dans la balise body je ne peux plus redimensionner...

Donc ce que j'ai fait dans mes 2 fonctions ne marche pas du tout!

Code:

1
2
3
4
5
6
7
function moveAction(p_obj,e){
	document.onmousemove = function(e){moveAllAction(e)};
	document.onmouseup	= function(){leaveAllAction()};
	if(isClicked == false){
		modifCurseur(p_obj, e);
	}
}

Cela fonctionne en faisant :

Code:

1
2
3
4
5
6
7
8
 
function moveAction(p_obj,e){
    document.onmousemove = function(e){moveAllAction(event)};
    document.onmouseup    = function(){leaveAllAction()};
    if(isClicked == false){
        modifCurseur(p_obj, e);
    }
}

Mais le problème dont je parle n'est toujours pas corrigé. Il est toujours présent.

03/11/2008, 15h22
le_chomeur

bon montre moi le code HTML +javascript complet :) :)
03/11/2008, 17h27
franfr57

Personne ne peux m'aider pour mon problème qui n'apparait qui sous IE et qui est pour les nerveux de la souris?

Merci pour votre aide
03/11/2008, 17h33
franfr57

Comme je l'ai dit je me suis basé sur le code de cette page :

http://www.madiot.info/redim/

En faisant source on peut voir le code.

Pour faire apparaitre le problème simplement il suffit de prendre 2 carré de faire des rectangle un haut dessus de l'autre de la taille de la page (en longeur)
Ensuite il faut faire un redimensionnement d'un objet et se mettre sur l'autre rapidement et lacher la souris (on voit un sens interdit apparaitre). Et à on peut redimensionner sans que le clic de la souris soit enfoncé.

Il faut s'y reprendre à plusieurs fois quand même pour y arriver...
J'y arrive parfois sans me mettre sur l'objet, mais c'est plus dure.