<!doctype html>
<style>
  body {
    margin: 0;
    padding: 0;
  }

  div {
    position: absolute;
    width: 50px;
    height: 50px;
    left: 0;
    top: 0;
  }

  #TR {
    left: 206px;
  }

  #BL {
    top: 206px;
  }

  #BR {
    left: 206px;
    top: 206px;
  }

  #container {
    width: 256px;
    height: 256px;
    left: 0;
    top: 0;
    border: 1px solid black;
  }

  #slide {
    background: silver;
    z-index: 1;
  }
</style>
<body>
  <div id="container">
    <div id="slide"></div>
    <div id="TR"></div>
    <div id="BR"></div>
    <div id="BL"></div>
  </div>
  <script>
    let offset
    let mouseDown = false
    let slide = document.getElementById('slide')
    slide.addEventListener('mousedown', function (e) {
      mouseDown = true

      let bbox = slide.getBoundingClientRect()
      offset = {
        x: e.clientX - bbox.left,
        y: e.clientY - bbox.top,
      }
    })

    let container = document.getElementById('container')

    let slideBox = slide.getBoundingClientRect()
    let containerBox = container.getBoundingClientRect()
    let maxLeft = containerBox.width - slideBox.width - 2
    let maxTop = containerBox.height - slideBox.height - 2

    container.addEventListener('mousemove', function (e) {
      if (!mouseDown) return

      let bbox = slide.getBoundingClientRect()
      let newLeft = e.clientX - offset.x
      newLeft = Math.max(newLeft, 0)
      newLeft = Math.min(newLeft, maxLeft)

      let newTop = e.clientY - offset.y
      newTop = Math.max(newTop, 0)
      newTop = Math.min(newTop, maxTop)

      slide.style.top = `${newTop}px`
      slide.style.left = `${newLeft}px`
    })

    document.body.addEventListener('mouseup', function () {
      mouseDown = false
    })
  </script>
</body>


Collaborative Calculation and Data Science

colby

sagemath

Product

Resources

Company