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

Version imprimable

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:

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>

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:

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>

07/11/2022, 15h49
radjiv97441

3 pièce(s) jointe(s)

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 Pièce jointe 628539

Merci pour l'aide, c'est très bien
07/11/2022, 15h53
SpaceFrog

Il y a a priori un souci de mise en page, le bouton résolu est SOUS le bouton hau de page ...