When using interactJS with Angular to enable drag and drop functionality for elements with the 'draggable' class, everything was working smoothly until I encountered an issue with using the injected service of the component in the callback function for end drag. Here's the code snippet that caused the problem:
ngOnInit() {
interact('.draggable')
.draggable({
inertia: true,
modifiers: [
interact.modifiers.restrictRect({
restriction: 'parent',
endOnly: true
})
],
autoScroll: true,
listeners: { move: this.dragMoveListener, end: this.stackForUndo }
})
}
stackForUndo() {
// get current state of svg
let current_state = document.getElementById("Logo").outerHTML;
// clear redo stack
this.menuService.redo = {}
// get the previous saved actions
let actions = { elements: [] };
// if no action has been cached, initialise the localStorage undo element
if (actions == undefined) {
actions = { elements: [] };
// save stringified empty action to localStorage
this.menuService.undo = actions;
}
// add the current state of the svg
if(actions.elements.length >= 5){
actions.elements.shift();
}
actions.elements.push(current_state);
this.menuService.undo = actions;
}
However, after performing a drag operation, I encountered an issue where I couldn't drop the element and received the following error message in the browser console:
Cannot read property menuService of undefined (in this.menuService.redo = {})