drag-n-drop.html

<div class="container">
  <div class="sprite">
    <p>
      Test
    </p>
  </div>
</div>

<style>
  .container {
    margin: 0 auto;
    width: 300px;
    height: 300px;
    border: 1px solid #204040;
    background-color: #668080;
  }

  .sprite {
    position: absolute;
    width: 100px;
    height: 100px;
    background-color: #204040;
    color: white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
  }
</style>

<script>
  let sprite = document.querySelector(".sprite")
  let container = document.querySelector(".container")

  let mouseDown = false
  let offsetInSprite = null

  sprite.addEventListener("mousedown", function(e) { 
    // 1. this == e.currentTarget is an event catcher node
    // 2. e.target is an event source node
    // 3. e.offsetX, e.offsetY - relative offsets of the e.target
    // 4. e.x, e.y - absolute offsets of the pointer (in the viewport)
    // 5. e.currentTarget.offsetLeft, e.currentTarget.offsetTop - absolute offsets of the currentTarget

    mouseDown = true
    offsetInSprite = {
      top: e.y - sprite.offsetTop,
      bottom: sprite.offsetHeight - (e.y - sprite.offsetTop),
      left: e.x - sprite.offsetLeft,
      right: sprite.offsetWidth - (e.x - sprite.offsetLeft),
    }
    console.log(offsetInSprite)
  })

  document.addEventListener("mouseup", function(e) {
    mouseDown = false
    offsetInSprite = null
  })

  // mousemove event has to be bind to the document, and not to the sprite
  // otherwise if user changes mouse position too quickly, 
  // sprite position will remain old, mouse will be outside the element 
  // and event will be lost
  document.addEventListener("mousemove", function(e) { 
    if (!mouseDown) return;

    let topBoundary = container.offsetTop
    let bottomBoundary = container.offsetTop + container.offsetHeight
    let leftBoundary = container.offsetLeft
    let rightBoundary = container.offsetLeft + container.offsetWidth

    if (e.y - offsetInSprite.top < topBoundary) {
      var newSpriteTop = topBoundary
    } else if (e.y + offsetInSprite.bottom > bottomBoundary) {
      var newSpriteTop = bottomBoundary - sprite.offsetHeight
    } else {
      var newSpriteTop = e.y - offsetInSprite.top
    }

    if (e.x - offsetInSprite.left < leftBoundary) {
      var newSpriteLeft = leftBoundary
    } else if (e.x + offsetInSprite.right > rightBoundary) {
      var newSpriteLeft = rightBoundary - sprite.offsetWidth
    } else {
      var newSpriteLeft = e.x - offsetInSprite.left
    }


    sprite.style.left = newSpriteLeft + "px"
    sprite.style.top = newSpriteTop + "px" 
  })
</script>