Best Vue Libraries for Watching Visibility of Items and Drag and Drop

John Au-Yeung
May 19 · 4 min read
Photo by jean wimmerlin on Unsplash

Vue.js is an easy to use web app framework that we can use to develop interactive front end apps.

In this article, we’ll look at how to watch for the visibility of items and do drag and drop with 3rd party packages.

vue-observe-visibility

The vue-observe-visibility package lets us watch for the visibility status of any given HTML element in our component’s template.

It uses the Intersection Observer API to watch for element visibility.

We can install it as follows:

npm install --save vue-observe-visibility

Also, we can add it as script into our HTML code as follows:

<script src="https://unpkg.com/vue-observe-visibility/dist/vue-observe-visibility.min.js"></script>

Then we can use it as follows:

main.js

import Vue from "vue";
import App from "./App.vue";
import VueObserveVisibility from "vue-observe-visibility";
Vue.use(VueObserveVisibility);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");

App.vue

<template>
<div id="app">
<div v-for="n in 100" :key="n" v-observe-visibility="visibilityChanged">{{n}}</div>
</div>
</template>
<script>
export default {
name: "App",
methods: {
visibilityChanged(isVisible, entry) {
console.log(
`${entry.target.innerText} is ${isVisible ? "visible" : "invisible"}`
);
}
}
};
</script>

In the code above, we registered the VueObserveVisibility package in main.js so that we can use it throughout our app.

Then we have App.vue , which has a list of divs that displays a number each.

In each div, we use the v-observe-visibility directive with the visibilityChanged method in the methods property to log the visibility of each item.

The entry object is the event object, which has the target property with the element that’s being watched.

The invisible property is a boolean that indicates whether the given item is visible or not.

Now when we scroll up and down the page, we’ll see something like:

...
31 is invisible
59 is visible
30 is invisible
...

from the console log output as we scroll.

We can also add the once option to the object that we pass in as the value of the v-observe-visibility directive as follows:

<div v-observe-visibility="{
callback: visibilityChanged,
once: true,
}">
...
</div>

This way, we only watch the visibility of the elements inside when the elements first load.

Also, we can add a throttle option so that the callback won’t be called too frequently. For instance, we can write:

<div v-observe-visibility="{
callback: visibilityChanged,
throttle: 300,
}">
...
</div>

The code above will delay the calling of the visibilityChanged callback buy 300ms.

We can throttle with options by adding a throttleOptions property, which takes a leading option to trigger the callback the first time when the visibility changes without waiting for the throttle delay.

It can be visible, hidden or both.

Also, we can disable the observer on an item by passing in a falsy value as follows:

<div
v-for="n in 100"
:key="n"
v-observe-visibility="n === 100 ? visibilityChanged : false"
>
//...
</div>

The code above will only observe the visibility change on the last item.

Photo by Matthew Sleeper on Unsplash

v-dragged

The v-dragged directive lets us handle the dragging of items with ease.

To install it, we run:

npm install --save v-dragged

Then we can use it as follows:

main.js

import Vue from "vue";
import App from "./App.vue";
import VDragged from "v-dragged";
Vue.use(VDragged);
Vue.config.productionTip = false;
new Vue({
render: h => h(App)
}).$mount("#app");

App.vue

<template>
<div id="app">
<div v-dragged="onDragged" id="drag">drag me</div>
</div>
</template>
<script>
export default {
name: "App",
methods: {
onDragged({
el,
deltaX,
deltaY,
offsetX,
offsetY,
clientX,
clientY,
first,
last
}) {
if (first) {
return;
}
if (last) {
return;
}
const l = +window.getComputedStyle(el)["left"].slice(0, -2) || 0;
const t = +window.getComputedStyle(el)["top"].slice(0, -2) || 0;
el.style.left = `${l + deltaX}px`;
el.style.top = `${t + deltaY}px`;
}
}
};
</script>
<style>
#drag {
position: absolute;
}
</style>

In the code above, we have a div with the text ‘drag me’ inside. We bind it to the v-dragged directive with the value set to the onDragged method.

In the onDragged method, we can get the new left and top coordinates by using the window.getComputedStyle method with the element object el , which has the element being dragged.

Then we can use those new values to set the new left and top styles as we did below:

el.style.left = `${l + deltaX}px`;
el.style.top = `${t + deltaY}px`;

We added the deltas to the original left and top values to update the position.

Also, we set our draggable element’s style to be position: absolute; so that we can move it freely around the page.

Conclusion

The vue-observe-visibility package lets us watch the visibility of items on the screen. The callback that’s called when the visibility is updated can be throttled.

The v-dragged package is useful for handling drag events. We can use it to update the position of the items being dragged with the data provided by the directive.

A note from the Plain English team

Did you know that we have four publications? Show some love by giving them a follow: JavaScript in Plain English, AI in Plain English, UX in Plain English, Python in Plain English — thank you and keep learning!

We’ve also launched a YouTube and would love for you to support us by subscribing to our Plain English channel

And as always, Plain English wants to help promote good content. If you have an article that you would like to submit to any of our publications, send an email to submissions@plainenglish.io with your Medium username and what you are interested in writing about and we will get back to you!

JavaScript In Plain English

New articles every day.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store