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