<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;
}

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" });

External CSS

  1. https://codepen.io/GreenSock/pen/gOWxmWG.css

External JavaScript

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js
  2. https://unpkg.com/gsap@3/dist/Draggable.min.js
  3. https://assets.codepen.io/16327/InertiaPlugin.min.js