3

I want to detect an element movement in my page . for example i have a bottom with offsetheight: 200px and offsetleft : 200px and i want to have a listener for detect that element position has been changed (not resized <======)

Erfan Farhadi
  • 68
  • 1
  • 7
  • Welcome to stackoverflow! Please add your existing code to the question so that the community members can debug and present a good solution. Read more about minimal reproducible examples: https://stackoverflow.com/help/minimal-reproducible-example – Ajith Gopi Apr 27 '21 at 05:31
  • 1
    How s the element being moved? (e.g. removed and reappended or is just the style being changed or...). – A Haworth Apr 27 '21 at 05:59
  • Duplicate of - https://stackoverflow.com/q/59792071/104380 – vsync Aug 19 '22 at 10:27

1 Answers1

6

You can detect whether an attribute on an element has been changed or whether something has been added/subtracted from the DOM by using a MutationObserver.

Here's a simple example where a change anywhere in the body is noted by a console.log. The offset of the button you are interested in can then be read and checked against the original to see if it has moved.

<!doctype html>
<html>
<head>
<title>Observe</title>
<style>
.movedown {
  position: relative;
  width: 30vmin;
  height: 30vmin;
}
.button {
  width: 20vmin;
  height: 20vmin;
  background: pink;
}
</style>
</head>
<body>
<button onclick="this.classList.toggle('movedown');console.log('button.offsetTop = ' + button.offsetTop);">CLICK ME TO EXTEND/SHRINK ME SO THE OTHER BUTTON MOVES</button>
<button class="button">I AM THE BUTTON YOU ARE INTERESTED IN SEEING WHEN I HAVE MOVED</button>
<div></div>
<script>
//This script copied almost complete from MDN
// Select the node that will be observed for mutations
const targetNode = document.body;
const button = document.querySelector('.button');


// Options for the observer (which mutations to observe)
const config = { attributes: true, childList: true, subtree: true };

// Callback function to execute when mutations are observed
const callback = function(mutationsList, observer) {
    // Use traditional 'for loops' for IE 11
    for(const mutation of mutationsList) {
        if (mutation.type === 'childList') {
            console.log('A child node has been added or removed.');
        }
        else if (mutation.type === 'attributes') {
            console.log('A ' + mutation.attributeName + ' attribute was modified.');
        }
    }
};

// Create an observer instance linked to the callback function
const observer = new MutationObserver(callback);

// Start observing the target node for configured mutations
observer.observe(targetNode, config);
</script>
</body>
</html>

Code taken from MDN where further info on the observing such mutations can be found.

A Haworth
  • 30,908
  • 4
  • 11
  • 14
  • 1
    tnx for your comment this works only when your elements attributes like top left and etc but when it moves by another elements, it's top and left and right not change and offset top and offset left changes i want to detect offset change of element – Erfan Farhadi Apr 27 '21 at 09:20
  • Sorry I misunderstood how the element might be moved, I'd assumed it was through some mouse action or something. So you need to look for any mutation in the DOM and then check whether the offsets of that particular element have changed? I'll update my answer shortly. – A Haworth Apr 27 '21 at 10:29
  • tnx for your answer; this works for me but this is a listener in whole document.body not for a special element ; is there any way for listen to a special element offset change – Erfan Farhadi Apr 28 '21 at 04:14
  • I don’t think so specifically because when we looked for mutations on just the one element as in my original answer it only senses attribute changes or tree structure changes. As anything might change an offset I think you have to listen for it all. – A Haworth Apr 28 '21 at 06:17