<div class="box">Drag Me!</div>
.box {
  width: 160px;
  height: 90px;
  border-radius: 5px;
  background: var(--purple);
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
  text-align: center;
  font-size: 1.5em;
  font-weight: 400;
  line-height: 100px;
  color: white;
  user-select: none;
  cursor: grab;
}
gsap.registerPlugin(Observer);

let xSetter = gsap.quickSetter(".box", "x", "px");
let ySetter = gsap.quickSetter(".box", "y", "px");

Observer.create({
  target: ".box",
  type: "pointer,touch",
  lockAxis: true,
  dragMinimum: 3,
  onLockAxis(self) {
    console.log("locked to axis", self.axis);
  },
  onPress(self) {
    self.pressX = gsap.getProperty(self.target, "x");
    self.pressY = gsap.getProperty(self.target, "y");
  },
  onChangeX(self) {
    xSetter(self.pressX + self.x - self.startX);
  },
  onChangeY(self) {
    ySetter(self.pressY + self.y - self.startY);
  }
});

External CSS

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

External JavaScript

  1. https://unpkg.co/[email protected]/dist/gsap.min.js
  2. https://assets.codepen.io/16327/Observer.min.js?v=3.11.1