Discussion :

[jac3n]

Hello les gens!
Voila je développe une application web de gestion (de fichiers et de bdd) en ligne.
Le principe c'est un dialogue permanent entre le coté PHP et le coté JS du script pour afficher une liste de fichiers détaillée. J'en suis à la version 7.0 du script donc je pense etre plutot bien rodé ;
Mais il reste que j'ai décidé d'innover un peu avec une selection manuelle de type desktop (click et déplacement du curseur comme sur n'importe quel bureau).

J'ai réussi à me faire un petit selecteur graphique en fome de rectangle :

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
 
onmousedown = function(event) {
   startSelect(event); //poof on crée le selecteur
}
 
 
onmouseup = function(event) {
	if(selecting) killSelect(); //si le selecteur existe on le détruit
}
 
onmousemove = function(event) {
	if(selecting) dragSelecter(event) ; //si le sélecteur existe on l'adapte au mouvements de la souris
}
 
//FONCTIONS À LA SOURIS
function startSelect(event) {
	lastClick = [event.pageX, event.pageY]; //enregistre les coordonées du click
	var SELECTER = document.createElement("DIV");
	SELECTER.id = "selecter";
	SELECTER.style.top = event.pageY +"px"; //positionnement Y
	SELECTER.style.left = event.pageX+ "px"; //pos X
	document.body.appendChild(SELECTER);
	selecting = true; //pour savoir que le selecteur existe
}
 
function killSelect() {
	document.body.removeChild(gid("selecter")); //destruction du selecteur
	lastClick = []; //réinitialisation des coordonées
	selecting = false;
}

Et la sa se corse un pti peu pour adapter le DIV

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
 
function dragSelecter(event) {
	var SELECTER = gid("selecter"); //accès à l'élément
	SELECTER.style.visibility = "visible";
	//gestion de l'axe X
	if(event.pageX - lastClick[0] > 0) {
		SELECTER.style.width = (event.pageX - lastClick[0]) + "px";
	}
	else {
		SELECTER.style.left = event.pageX + "px";
		SELECTER.style.width = (lastClick[0] - event.pageX) + "px";
	}
	//gestion de l'axe Y
	if(event.pageY - lastClick[1] > 0) {
		SELECTER.style.height = (event.pageY - lastClick[1]) + "px";
	}
	else {
		SELECTER.style.top = event.pageY + "px";
		SELECTER.style.height = (lastClick[1] - event.pageY) + "px";
	}
//la suite après

Là notre DIV est bien ajusté et forme un rectangle modifiable par simple mouvement du curseur : c'était la partie facile.

Pour savoir si ce rectangle de sélection est au DESSUS d'un élement de la liste je fait une boucle qui ressemble à ceci (je shématise ):

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
//la suite ici
var pos = getpos(SELECTER); // array (X, Y, WIDTH, HEIGHT)
 
for( TOUS LES ELEMENTS DE LA LISTE & LEUR COORDONEES ) {
 
    if( RECTANGLE AU DESSUS DE L ELEMENT ) {
       ET POOF ON SELECTIONNE
    } else {
       ET POOF ON DESELECTIONNE
    }
 
} //endfor

Si ya des truc que vous n'avez pas piger je réexpliquerais.

Mon problème se résume en fait à un problème de logique donc pour les matheux sa devrait etre simple en somme :

comment savoir si un rectangle est (au moin) en partie positionné au dessus d'un autre rectangle, et ceci au moyen de leur coordonnées ?

Help me je pète un cable ^^

[SpaceFrog]

J'ai trouvé ça
http://www.kevlindev.com/gui/math/in...troductio-4219

[SpaceFrog]

plus spécifiquement :
http://www.kevlindev.com/gui/math/in...Rectangl-28326

[jac3n]

yé merde c'est un peu trop le bordel pour moi, le mec qui a fait sa est juste un psychopathe.

J'aurais préferé une solution simple pas un prototype de 50ko

[SpaceFrog]

ben downloade la librairie et ne garde que la fonction ou les fonctions nécessaires ?

et puis 50Ko ça va pas surcharger ta page ...

[jac3n]

J'ai eu une ilumination =)

Je te remerci pour le scrip en fait la seule piste qu'il m'a donné c'est de n'utiliser que les coordonnées de 2 pojnt : ABDC est constructible grace aux coodonnées de A et de D =)

[SpaceFrog]

ben oui les deux coins opposés