Salut, en reprenant cet exemple simple là, comment utiliser touchstart,touchmove et touchend pour avoir un déplacement sur smartphone qui fonctionne avec snap svg ?

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
 
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,
        body {
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        #stage {
            background-color: white;
            width: 100%;
            height: 100%;
        }
    </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js"></script>
</head>
<body>
    <svg id="stage"></svg>
    <script>
        const w=1000, h=400, R=10;
        const curxmin=3*w/8, curxmax=5*w/8;
        var curx=w/2, xo=0;
 
        var svg = document.getElementById('stage');
        var paper=Snap('#stage');
       
        paper.attr({
            viewBox:[0,0,w,h].join(',')
        });
 
        function xSVG(svg,posx) {
            const svgMatrix = svg.getScreenCTM();
            return (posx - svgMatrix.e) / svgMatrix.a;  
        }
 
        const zoneinterdite=paper.g(
            paper.line(0,h/2,curxmin,h/2),
            paper.line(curxmin,h/2-R,curxmin,h/2+R),
            paper.line(curxmax,h/2,w,h/2),
            paper.line(curxmax,h/2-R,curxmax,h/2+R)
            ).attr({
              stroke: 'red',
              strokeWidth: 1
        });
 
        const barre=paper.line(curxmin,h/2,curxmax,h/2).attr({
              stroke: 'black',
              strokeWidth: 1
        });
 
        
        const track=paper.circle(curx,h/2,R).attr({
                    fill: 'black',
                    cursor: 'pointer'
        });
 
        const moveFunc = function(dx) {
            const maxRight = curxmax - R;
            const minLeft = curxmin + R;
            let curx = xo + xSVG(svg, dx);
        
            if (curx > maxRight) curx = maxRight;
            if (curx < minLeft) curx = minLeft;
            this.attr({
                cx: curx
            });
        };
 
        const startFunc = function() {
            xo=parseInt(this.attr("cx"));
        };
 
        const stopFunc = function() {
        }; 
 
       track.touchstart( startFunc );
       track.touchmove( moveFunc );
       track.touchend( stopFunc );
 
        track.drag(moveFunc, startFunc, stopFunc);
    </script>
 
</body>
</html>

Merci car je n'arrive pas à utiliser les bonnes signatures de touchEvent pour que ça fonctionne correctement.