Discussion :

[radjiv97441]

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 HTML :

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

[radjiv97441]

Merci j'ai pu trouvé , il fallait ajouter preventDefault partout

par exemple:

Code :

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

1
2
3
4
5
 
.mouseover(function(e) {
		e.preventDefault();
                ...
}