Discussion :

[axel584]

Bonjour,
Je voudrais pouvoir sélectionner plusieurs carrés dans un canvas, mes carrés sont alignés dans un tableau et par un clic maintenu de souris, je voudrais sélectionner plusieurs de ces carrés pour en indiquer l'ordre.

Par exemple, j'ai quelque chose du style :

ABCD
EFGH
IJKL
MNOP

chacune des lettres se trouve dans un carré et je veux pouvoir sélectionner les lettres sans laché le bouton de ma souris (et au moment où je lache, j'obtiens la suite de lettres voulus)

Je voulais savoir quels évenements je peux utiliser. Ce n'est pas du drag'n'drop, ce n'est pas vraiment non plus du mouseover (car le clic de la souris doit être enfoncé)...

Je me demande également si je dois utiliser un canvas ou bien si je peux faire ça directement avec un tableau ?

Merci pour votre aide,

Axel

[headmax]

Au niveau du choix événementiel onclick sans être relâcher tu risque de le condamner, après comment veux tu sélectionner des carrés via un onmouseover? en prenant le risque de choisir des carrés non désirées.
Tu dois pouvoir cliquer sur tes carrés mais tu autorise que 4 click et lorsque tu a tes 4 tu :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
var count = 0; //compter de click
function selectMe(){
 //tes actions sur le carré sélectionné ici
 
//si 4 carrés sélectionnés
  if(count>3){ 
   //removeEventListener ou detachEvent (ie) du onclick 
  }
 count++;
}

N'ayant aucune source de ton script ce n'est qu'une piste.

[axel584]

Non, justement, je ne veux pas cliquer plusieurs fois, je veux faire un seul clic, bouger la souris pour sélectionner mes carrés (ils sont forcément côte à côté ou en diagonal) et je peux vouloir en sélectionner 2 ou plus...

Pas d'autres pistes ?

Axel

[SpaceFrog]

la seule possibilité va être de calculer la position de la souris pendant le déplacement lors du maintien du bouton enfoncé.
Par contre pour le coup des selections en diagonales, il va falloir intégrer un timer de survol, sinon tes utilisateurs devront être des as du maniement de la souris et passer sur les deux seuls pixels qui se touchent en diagonale pour des carrés adjacents.

[NoSmoking]

Bonjour,
pour le principe
mousedown : start sélection, initialisation de la zone de sélection
mousemove : redraw du rectangle de sélection, cela peut être une DIV
mouseup : stoppe la sélection, récupére les bornes de la sélection, recherche des éléments contenus dans cette sélection...action