cormacrelf / dragula-touch-demo

13 stars 5 forks source link

How to reinitialise the autoScroll when a new element is added to the group? #11

Closed sandeepsuvit closed 6 years ago

sandeepsuvit commented 6 years ago

How do we reinitialise the autoScroll for a new column that is dynamically added? For example, consider we have Trello like board where there are two columns like "Todo" and "In progress". Consider we have already initialised the autoScroll for these two columns on load to inherit the autoscrolling property when we drag the cards around. Now i am adding a new column named "Done" dynamically without any page refresh. How do i reinitialise the autoScroll function on the 3rd column in this case. I have tried making a function like shown below whenever i add new columns and called it when i create new columns.

initScroll() {
    autoScroll([document.querySelector('.list-container')], {
        margin: 20,
        maxSpeed: 5,
        scrollWhenOutside: true,
        autoScroll: function(){
            //Only scroll when the pointer is down, and there is a child being dragged.
            return this.down;
        }
    });
}

But this doesn't work and i see that dragging cards around after calling this function multiple times makes the app so slow, seems like some kind of recursive function calls is happening internally if the function initScroll() is made more than once without a page referesh. I would like to understand a workaround for this. Please help.

sandeepsuvit commented 6 years ago

Added a temporary fix to this issue in my example like so. As per the above details i was calling initScroll whenever a new column was added. Now instead of calling initScroll method i created another method

resetScroll() {
    // Remove all old column references
    [...Array.from(this.elRef.nativeElement.querySelectorAll('.columns'))].forEach(el => this.scrollElements.remove(el));

    // Add new column references
    [...Array.from(this.elRef.nativeElement.querySelectorAll('.columns'))].forEach(el => this.scrollElements.add(el));
}

This works in my case without any issues. Call this function whenever you want to reset the scroll conditions. Dont know if this is the wright thing to do. Please do comment.

sandeepsuvit commented 6 years ago

Closing issue since an alternative was found