In my Vue app, I have implemented methods to dynamically move a DIV called 'toolbox' to different sections of the DOM. Currently, the DIV is positioned on the bottom right of the screen and remains static even when scrolling.
My goal is to use the methods I created to move the DIV to the "Top Left", "Top Right", and "Bottom Left" corners of the screen. However, I am facing challenges in determining the correct pixel values to provide to these functions. Is there a more efficient way to achieve this?
Here's a snippet of my code:
<button @click="changePositionTopLeft">Move Top Left</button>
<button @click="changePositionTopRight">Move Top Right</button>
<button @click="changePositionBottomLeft">Move Bottom Left</button>
methods: {
changePositionTopLeft() {
const divPosition = document.getElementById('sdk-ts-root')
divPosition.style.left = '200px'
divPosition.style.top = '200px'
},
changePositionTopRight() {
const divPosition = document.getElementById('sdk-ts-root')
divPosition.style.right = '400px'
divPosition.style.top = '400px'
},
changePositionBottomLeft() {
const divPosition = document.getElementById('sdk-ts-root')
divPosition.style.left = '400px'
divPosition.style.bottom = '400px'
}
}
}