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 ^^