Previously, I had set up my project with two boards for dragging and dropping cards. However, I am now interested in experimenting with interact.js because it seems like a reliable library that is well-maintained. Since I am using vue for this project, I am unsure how to proceed.
I came across a blog post here that demonstrates the use of interact.js with swipeable cards, and I attempted to adapt it to my needs. Here is what my card component currently looks like:
<template>
<v-card
ripple
class="primary"
:id = "id"
ref="interactElement"
>
<slot/>
</v-card>
</template>
<script>
import interact from 'interactjs';
export default {
props: ['id'],
mounted() {
const element = this.$refs.interactElement;
console.log(element);
interact(element).draggable({
onstart: () => {
console.log('---------start dragging');
},
onend: () => {
console.log('---------end dragging');
},
});
},
};
</script>
<style scoped>
.v-card {
height: 7rem;
width: 7rem;
}
.draggable{
touch-action: none;
user-select: none;
}
</style>
However, I am currently facing an issue where events like onstart are not triggering. Can anyone help me understand what I may be doing wrong?
I am also considering whether it would be better to follow this method or try using a wrapper for interact.js in vue like this one? I am unsure of the benefits of using such a wrapper, especially since I am relatively new to vue. Any insights would be appreciated.
Thank you in advance! :)