Created
August 17, 2022 07:48
-
-
Save achjailani/16a88411d558370bf4a279fa3a4bed10 to your computer and use it in GitHub Desktop.
Moveable and resizeable element
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Document</title> | |
| <style> | |
| #main { | |
| width: 100%; | |
| } | |
| #dragable { | |
| width: 100px; | |
| height: 100px; | |
| overflow: auto; | |
| display: flex; | |
| align-items: center; | |
| resize: both; | |
| background: #EF476F; | |
| user-select: none; | |
| position: absolute; | |
| cursor: col-resize; | |
| } | |
| #dragable #move { | |
| width: 97px; | |
| height: 97px; | |
| margin: 0 auto; | |
| background-color: aliceblue; | |
| cursor: move; | |
| user-select: none; | |
| overflow: auto; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="main"> | |
| <div class="hello"> | |
| <div id="dragable"> | |
| <div id="move"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| let dragableContainer = document.getElementById("dragable") | |
| let dragableElemet = document.getElementById("move") | |
| let x = 0 | |
| let y = 0 | |
| const mouseDownHandler = function(e) { | |
| x = e.clientX | |
| y = e.clientY | |
| document.addEventListener('mousemove', mouseMoveHandler) | |
| document.addEventListener('mouseup', moveUpHandler) | |
| } | |
| const mouseMoveHandler = function(e) { | |
| const dx = e.clientX - x | |
| const dy = e.clientY - y | |
| dragableContainer.style.top = `${dragableContainer.offsetTop + dy}px` | |
| dragableContainer.style.left = `${dragableContainer.offsetLeft + dx}px` | |
| y = e.clientY | |
| x = e.clientX | |
| } | |
| const moveUpHandler = function(e) { | |
| document.removeEventListener('mousemove', mouseMoveHandler) | |
| document.removeEventListener('mouseup', moveUpHandler) | |
| } | |
| dragableElemet.addEventListener('mousedown', mouseDownHandler) | |
| const rectangleResizeObserver = new ResizeObserver((agrs) => { | |
| for (let cx of agrs) { | |
| const targetId = cx.target.id | |
| if (targetId === dragableContainer.id) { | |
| document.getElementById("move").style.width = `${dragableContainer.offsetWidth - 3}px` | |
| document.getElementById("move").style.height = `${dragableContainer.offsetHeight - 3}px` | |
| } | |
| } | |
| }) | |
| rectangleResizeObserver.observe(dragableContainer) | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment