Logique & de géométrie

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:

---

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:

---

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:

---

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

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

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

:hola: 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 :(

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

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

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 =)

:salut:

ben oui les deux coins opposés