Générer une grille colorée
Bonjour, le but est de générer une grille colorée en fonction de ma sélection avec la souris ou bien de virer la sélection.
Le code ci-dessous bug, la détection de la sourie n'est pas toujours détectée. Dés fois le mousedown n'est pas autorisé.
voila ce que j'ai fait, merci si vous avec une meilleur idée pour ma recherche.
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
| <style>
.row {
clear: left;
background-color: red;
}
.cell {
width: 50px;
height: 50px;
border: 1px dashed blue;
float: left;
background-color:rgba(255,255,255,1);
}
.celldoun {
background-color:rgba(125,0,0,0.8);
}
.cellover {
background-color:rgba(125,0,0,0.3);
}
</style>
<div id="grid"></div>
<script>
var depart=["cell",-1,-1];
var setGridDimensions = function(n) {
var html ='';
for (var i = 0; i < n; i++) {
html += '<div class="row">';
for (var j = 0; j < n; j++) {
html += '<div id=cell_'+i+'_'+j+' data-fixe="0" class="cell"></div>';
}
html += '</div>';
}
$("#grid").html(html);
$(".row div").mousedown(function() {//je commence la selection
depart=$(this).attr("id").split("_");
$(this).removeClass("cellover");
$(this).removeClass("celldoun");
$(this).toggleClass("cellover")
});
$(".row div").mouseup(function() {//je valide la selection
if(depart[1]>-1){
fixe=parseInt($("#"+depart.join('_')).attr("data-fixe"));
fin=$(this).attr("id").split("_");
Imin=Math.min(depart[1],fin[1]);
Imax=Math.max(depart[1],fin[1]);
Jmin=Math.min(depart[2],fin[2]);
Jmax=Math.max(depart[2],fin[2]);
for(i=Imin;i<=Imax;i++){
for(j=Jmin;j<=Jmax;j++){
$("#cell_"+i+"_"+j).removeClass("cellover");
$("#cell_"+i+"_"+j).removeClass("celldoun");
if( fixe == 0){
$("#cell_"+i+"_"+j).toggleClass("celldoun");
$("#cell_"+i+"_"+j).attr("data-fixe",1);
} else {
$("#cell_"+i+"_"+j).attr("data-fixe",0);
}
}
}
}
depart=["cell",-1,-1];
});
$( ".row div" ).mouseover(function() {//je remets à jour le cadre
fin=$(this).attr("id").split("_");
Imin=Math.min(depart[1],fin[1]);
Imax=Math.max(depart[1],fin[1]);
Jmin=Math.min(depart[2],fin[2]);
Jmax=Math.max(depart[2],fin[2]);
for(i=0;i<n;i++){
for(j=0;j<n;j++){
$("#cell_"+i+"_"+j).removeClass("cellover");
$("#cell_"+i+"_"+j).removeClass("celldoun");
if((Imin>-1)&&(i>=Imin)&&(i<=Imax)&&(j>=Jmin)&&(j<=Jmax)){
$("#cell_"+i+"_"+j).toggleClass("cellover");
} else {
fixe=parseInt($("#cell_"+i+"_"+j).attr("data-fixe"));
if(fixe>0){
$("#cell_"+i+"_"+j).toggleClass("celldoun");
}
}
}
}
});
};
setGridDimensions(6);
</script> |
