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>