<div id="container">
  <div id="box"></div>
</div>

body {
  display: flex;
  align-items: center;
  justify-content: center;
}

#container {
  height: 800px;
  width: 1000px;
  border: 1px solid green;
}
#box {
  width: 100px;
  height: 100px;
  border-radius: 8px;
  background: lightgreen;
}

gsap.registerPlugin(Draggable)

const myDraggable = Draggable.create('#box', {
  bounds: '#container'
})[0]


myDraggable.addEventListener('press', onPress)

function onPress() {
  console.log('pressed', this)
  gsap.to(this.target, { duration: 2, backgroundColor: 'purple' })
}