Sortable.min.js drag nombre entier vers tableau plusieurs colonnes

**radjiv97441** · 07/11/2022, 10h40

Bonjour, je cherche un moyen de glisser un nombre dans tableau à plusieurs colonnes en utilisant le module Sortable.min.js
(je ne cherche pas à vérifier que l'opération soit juste, mais seulement l'insérer).
-Si le drag arrive sur le tableau: on fait un visuel et on peu encore bouger
Par exemple on commence à insérer à la position de la souris dans le tableau.
un seul chiffre par colonne (il n'y a pas de virgule, que des entiers)
-Si l'utilisateur recommence, on efface l'ancien contenu du tableau au début du drag.

Je ne vois pas comment cibler la cellule de départ pour écrire dans le tableau.
Peut-être que le fait de mettre dans un tableau n'est pas du tout adéquat pour ce type de module.
Merci par avance pour vos remarques.

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
<table border="0" cellspacing="0" cellpadding="0" width="100%">
   <tbody id="nombredepart"><tr><td class="drag-handler" style="background:#FFF;text-align:center;font-size:18.0pt;"><span id="nombre">2345</span><span>m<sup>3</sup></span></td></tr></tbody></table>
   <table border="0" cellspacing="0" cellpadding="0" width="100%">
   <tbody id="tableaucible">
   <tr>
     <td colspan="9" style="border:solid 1.2pt;background:#C2D69B;text-align:center;">Multiples du m<sup>3</sup></td>
     <td colspan="3" style="border:solid 1.2pt;border-left:none;background:#C2D69B;text-align:center;">unité</td>
     <td colspan="9" style="border:solid 1.2pt;border-left:none;background:#C2D69B;text-align:center;">Sous multiples du m<sup>3</sup></td>
     </tr>
   <tr>
    <td colspan="3" style="border:solid 1.0pt;border-top:none;background:#EAF1DD;text-align:center;"><b><span style="font-size:14.0pt;">km<sup>3</sup></span></b></td>
    <td colspan="3" style="border-top:none;border-left:none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;background:#EAF1DD;text-align:center;"><b><span style="font-size:14.0pt;">hm<sup>3</sup></span></b></td>
    <td colspan="3" style="border-top:none;border-left:none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;background:#EAF1DD;text-align:center;"><b><span style="font-size:14.0pt;">hm<sup>3</sup></span></b></td>
    <td colspan="3" style="border-top:none;border-left:none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;background:#EAF1DD;text-align:center;"><b><span style="font-size:14.0pt;">m<sup>3</sup></span></b></td>
    <td colspan="3" style="border-top:none;border-left:none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;background:#EAF1DD;text-align:center;"><b><span style="font-size:14.0pt;">dm<sup>3</sup></span></b></td>
    <td colspan="3" style="border-top:none;border-left:none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;background:#EAF1DD;text-align:center;"><b><span style="font-size:14.0pt;">cm<sup>3</sup></span></b></td>
    <td colspan="3" style="border-top:none;border-left:none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;background:#EAF1DD;text-align:center;"><b><span style="font-size:14.0pt;">mm<sup>3</sup></span></b></td>
   </tr>
   <tr>
    <td class="drag-handler" style="border:solid 1.0pt;border-top:none;text-align:center;">0</td>
    <td style="border-top:none;border-left:none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;text-align:center;">0</td>
    <td style="border-top:none;border-left:none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;text-align:center;">0</td>
    <td style="border-top:none;border-left:none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;text-align:center;">0</td>
    <td style="border-top:none;border-left:none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;text-align:center;">0</td>
    <td style="border-top:none;border-left:none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;text-align:center;">0</td>
    <td style="border-top:none;border-left;none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;text-align:center;">0</td>
    <td style="border-top:none;border-left;none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;text-align:center;">0</td>
    <td style="border-top:none;border-left:none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;text-align:center;">0</td>
    <td style="border-top:none;border-left;none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;text-align:center;">0</td>
    <td style="border-top:none;border-left:none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;text-align:center;">0</td>
    <td style="border-top:none;border-left:none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;text-align:center;">0</td>
    <td style="border-top:none;border-left:none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;text-align:center;">0</td>
    <td style="border-top:none;border-left:none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;text-align:center;">0</td>
    <td style="border-top:none;border-left:none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;text-align:center;">2</td>
    <td style="border-top:none;border-left:none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;text-align:center;">3</td>
    <td style="border-top:none;border-left:none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;text-align:center;">4</td>
    <td style="border-top:none;border-left:none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;text-align:center;">5</td>
    <td style="border-top:none;border-left:none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;text-align:center;">0</td>
    <td style="border-top:none;border-left:none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;text-align:center;">0</td>
    <td style="border-top:none;border-left:none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;text-align:center;">0</td>
   </tr>
  </tbody></table>
 
<script src="https://cdn.jsdelivr.net/npm/sortablejs@latest/Sortable.min.js"></script>
<script>
        Sortable.create(nombredepart,
        {
                    group: 'list',
            animation: 150,
            handle: '.drag-handler',
            onEnd: function () {}
        }
    );
        Sortable.create(tableaucible,
        {
                    group: 'list',
            animation: 150,
            onEnd: function () {}
        }
    );
        
</script>

**mathieu** · 07/11/2022, 13h07

vous êtes sûr que ça soit pratique pour les utilisateurs de faire des glisser-déplacer ?
je pense que ça serait plus simple en cliquant sur les cases.

j'ai fait un test avec le code suivant, regardez aussi comment éviter la répétition du code css avec une classe css ligne_chiffres :

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
91
92
93
94
95
96
97
98
99
100
101
102
103
<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
</head>
<body>
 
<style>
.ligne_chiffres td
{
        border : solid 1.0pt;
        width : 1em;
        text-align : center;
}
</style>
 
<table border="0" cellspacing="0" cellpadding="0" width="100%">
  <tbody id="nombredepart"><tr><td class="drag-handler" style="background:#FFF;text-align:center;font-size:18.0pt;"><span id="nombre">2 345</span>*<span>m<sup>3</sup></span>
</td></tr></tbody></table>
<table border="0" cellspacing="0" cellpadding="0" width="100%">
  <tbody id="tableaucible">
   <tr>
     <td colspan="9" style="border:solid 1.2pt;background:#C2D69B;text-align:center;">Multiples du m<sup>3</sup></td>
     <td colspan="3" style="border:solid 1.2pt;border-left:none;background:#C2D69B;text-align:center;">unité</td>
     <td colspan="9" style="border:solid 1.2pt;border-left:none;background:#C2D69B;text-align:center;">Sous multiples du m<sup>3</sup></td>
     </tr>
   <tr>
    <td colspan="3" style="border:solid 1.0pt;border-top:none;background:#EAF1DD;text-align:center;"><b><span style="font-size:14.0pt;">km<sup>3</sup></span></b></td>
    <td colspan="3" style="border-top:none;border-left:none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;background:#EAF1DD;text-align:center;"><b><span style="font-size:14.0pt;">hm<sup>3</sup></span></b></td>
    <td colspan="3" style="border-top:none;border-left:none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;background:#EAF1DD;text-align:center;"><b><span style="font-size:14.0pt;">hm<sup>3</sup></span></b></td>
    <td colspan="3" style="border-top:none;border-left:none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;background:#EAF1DD;text-align:center;"><b><span style="font-size:14.0pt;">m<sup>3</sup></span></b></td>
    <td colspan="3" style="border-top:none;border-left:none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;background:#EAF1DD;text-align:center;"><b><span style="font-size:14.0pt;">dm<sup>3</sup></span></b></td>
    <td colspan="3" style="border-top:none;border-left:none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;background:#EAF1DD;text-align:center;"><b><span style="font-size:14.0pt;">cm<sup>3</sup></span></b></td>
    <td colspan="3" style="border-top:none;border-left:none;border-bottom:solid 1.0pt;border-right:solid 1.0pt;background:#EAF1DD;text-align:center;"><b><span style="font-size:14.0pt;">mm<sup>3</sup></span></b></td>
   </tr>
   <tr class="ligne_chiffres">
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>0</td>
    <td>0</td>
    <td>0</td>
   </tr>
  </tbody>
</table>
 
 
<script>
"use strict";
 
 
const chiffres = ["2", "3", "4", "5"];
 
const ligne_chiffres = document.getElementsByClassName("ligne_chiffres")[0];
 
 
[...ligne_chiffres["cells"]].forEach((lacase, index) => {
        
        lacase.addEventListener("click", e => {
                // évènement lors d'un clic sur une case
                
                const index_clic = index;
                
                // parcours de toutes les cases pour remplir les chiffres
                [...ligne_chiffres["cells"]].forEach((lacase, index) => {
                        
                        const index_tableau_chiffres = index - index_clic + chiffres["length"] - 1;
                        
                        if ("undefined" === typeof chiffres[index_tableau_chiffres]) {
                                lacase["textContent"] = "";
                        } else {
                                lacase["textContent"] = chiffres[index_tableau_chiffres];
                        }
                        
                });
                
        });
        
        
});
 
</script>
 
 
</body>
 
</html>

**radjiv97441** · 07/11/2022, 15h49

L'autre fois j'ai eu un avertissement parce que je n'ai pas coché Résolue puisqu'il n'y a pas, je vous envoie une photo, car je ne sais pas ou cliquer Nom : Image2.png
Affichages : 142
Taille : 150,2 Ko