[Vuejs]-Is there a way to watch screenX and screenY positions and have a method run when they change?

by

0👍

At my opinion, you have to use an interval to detect the browser position since there’s no window move event.

if the browser position.x or the browser position.y change, you may dispatch a custom event.

The event here when you move the window will change the color of the text from black to red.

const event = new CustomEvent("browserMove",{ detail: "browserPosition" });
window.addEventListener("browserMove", onBrowserMove);
let moveTimer=null;
let content=null;
let oldX = 0;
let oldY = 0;
document.addEventListener("DOMContentLoaded",onReady);
  function onReady(e){
    content = document.getElementById("content");
    oldX = window.screenX;
    oldY = window.screenY;
    moveTimer = setInterval(detectBrowserMove,200);
  }
  function detectBrowserMove(){
    let r = browserPosition();
    if(r.x !== oldX || r.y !== oldY){
        // dispatch an event here
        window.dispatchEvent(event);
        oldX = window.screenX;
        oldY = window.screenY;
    }
    content.innerHTML = ("browser.x = " + r.x + ", browser.y = " + r.y);
  }
  function browserPosition() {
    let position={};
    position = {x:window.screenX, y:window.screenY};
    return(position);
  }
  function onBrowserMove(e){
    // write your code here
    let x = window.screenX;
    let y = window.screenY;
    content.style.color="#ff0000";
  }
<div id="content">
            
</div>

0👍

If I catch your problem correctly, you are saying that-

A notification window will open in the center by default. The user can
drag it anywhere and when next time the notification window will appear, it should pop up at the position where the user last dragged it.

If we take the problem in some other way, you need the last dragged position of the window to send to the API for the next time opening. So, instead of checking the window’s position every time why not check for only the last/latest position before it closes?

What I mean is-

  1. Let the notification window open.
  2. Attach a unload listener to it.
  3. Drag it anywhere you want multiple times.
  4. When the window is about to close, look into the listener, and grab the latest position.

Here is how you can do it in Vue-

  1. Create a window data variable in your Vue and assign your newly opened window object to it-
data() {
  return {
     // Save notification window object to this data property
     vue_window: null;
  }
}
  1. Apply a watcher that when vue_window has some value, set a listener to it-
watch: {
    vue_window(newVal) {
      // Only if vue_window variable has some value
      if (newVal) {
       // this will fire when the window is about to close
        newVal.onunload = () => {
          // Here are the latest screen positions of the window
          console.log(this.vue_window.screenX, this.vue_window.screenY);
        };
      }
    },
  },

That’s it. When the window will be about to close, you will have the last and latest position of the window which you can save wherever you want.

Here is the demo of this logic- CodeSandBox Link

I couldn’t create a snippet because the window is not opening in the snippet environment. I will add the snippet if found any solution to work with the window obj.

Leave a comment