how-draggable/index.html at main · hchiam/how-draggable · 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
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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Demo</title>
    <style>
      body {
        background: #333;
        filter: invert(1);
        font-family: avenir, arial, tahoma;
        display: flex;
        align-items: center;

        justify-content: center;
      }

      #target {
        background: white;
        top: 10px;
        padding: 2rem;
      }

      #snap_point {
        background: cyan;
        position: absolute;
        top: 40vh;
        z-index: -1;
      }
    </style>
    <script src="makeElementDraggable.js"></script>
    <script src="makeElementDraggableAndEditable.js"></script>
  </head>

  <body>
    <p id="target" draggable="true" clickable="true" tabindex="0">
      Drag Me!
      <!-- <span id="handle">handle</span> -->
    </p>
    <div id="snap_point">snap point <br />container <br />with height</div>
    <script>
      var element = document.getElementById("target");
      var snapPointElement = document.getElementById("snap_point");
      var someSettings = {
        mouseMoveCallback: (element) =>
          console.log("mousemove", element.style.left, element.style.top),
        touchMoveCallback: (element) =>
          console.log("touchmove", element.style.left, element.style.top),
        snapWithinElements: [snapPointElement],
        snapPoints: [
          {
            x: snapPointElement.offsetLeft + snapPointElement.offsetWidth / 2,
            y: snapPointElement.offsetTop + snapPointElement.offsetHeight / 2,
          },
        ],
        snapCallback: (left, top) => {
          console.log("snapped to this position:", "left", left, "top", top);
        },
        // customAriaLabel: (element, settings) => {
        //   return `Custom aria-label: ${
        //     element.innerText
        //   }. Settings: editing ${!settings?.disableEditing}, keyboard movement ${!settings?.disableKeyboardMovement}`;
        // },
        // snapGridSize: 25,
        // disableEditing: true,
        // disableKeyboardMovement: true,
        // handleSelector: "#handle",
      };
      // makeElementDraggable(target, someSettings);
      makeElementDraggableAndEditable(target, someSettings);
    </script>
  </body>
</html>