| <!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> |
