<div class="box green">drag me</div>

<div class="box purple">flick me</div>

<div class="box orange">spin me</div>

/* Global styles come from external css https://codepen.io/GreenSock/pen/gOWxmWG */


body {
  display: flex;
  align-items: center;
  justify-content: space-around;
  min-height: 100vh;
  margin: 0;
}

.box {
  display: block;
    display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  color: var(--color-just-black)
}

h1 {
  position: fixed;
  width: 100%;
  text-align: center;
  top: 0;
}

Draggable.create(".green", { bounds: "body" });

Draggable.create(".purple", { inertia: true, bounds: "body" });

Draggable.create(".orange", { inertia: true, type: "rotation", bounds: "body" });