Issue: I need assistance in implementing the following functionality using the ng2-dragula drag behavior.
I am working on creating a feature similar to the app-launcher found on iOS and Android devices.
I aim to drag an item A and drop it onto another existing item B.
- Upon dropping it on top of another item B, my goal is to respond by generating a folder item containing both items (this would involve angular/typescript logic implementation).
In the current ng2-dragula library, when I drag item A & drop it onto item B, the onDrop event provides details of item A as 'el', but does not specify how to identify item B.
I am having difficulty determining how to locate item B. Specifically, how can I determine the element on which item A was dropped?
Demonstration: I have prepared a demo Plunker showcasing the dragula setup and an example.
private onDrop(args) {
let [el, target, source] = args;
// perform additional tasks
console.log(`ondrop element: ${el.innerText.trim()}`);
console.log(`ondrop target container: ${target.innerText.trim()}`);
console.log(`ondrop source container: ${source.innerText.trim()}`);
}
private onDrag(args) {
let [el, source] = args;
// perform additional tasks
console.log(`ondrag element: ${el.innerText.trim()}`);
console.log(`ondrag source container: ${source.innerText.trim()}`);
}
https://plnkr.co/edit/xXFWfS0Ae8fts2UL94mo
I attempted to utilize a mouseover event on elements and then retrieve it within the dragula onDrop event, however, it did not capture details about element B (or whichever element A was dropped onto).
Could you please provide suggestions on how I can resolve this issue?
Thank you for your valuable guidance!