chickens2.github.io/interactjstest.html at master · chickens2/chickens2.github.io · GitHub

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
<html>
<head>
    <style type = text/css>
            .draggable {
          touch-action: none;
          user-select: none;
          color:blue;
        }
        .containerthing{
            background-color: coral;
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
<script src="js/interact.js"></script>
<div class="containerthing">
    <div class="draggable"> Draggable Element </div>
</div>
<script>
    const position = { x: 0, y: 0 }

    interact('.draggable').draggable({
      listeners: {
        start (event) {
            console.log('test')
          console.log(event.type, event.target)
        },
        move (event) {
          position.x += event.dx
          position.y += event.dy

          event.target.style.transform =
            'translate('+position.x+'px,'+position.y+'px)'
            //'transform(${position.x}, ${position.y})'
        },
      }
    })

</script>
</body>
</html>