Scroll to horizontally is not working

[azarzaza]

when we added board out of current viewport and then drag them over the last board it is not scrolling

[marcosrocha85]

@azarzaza I have a board with a couple of boards out of viewport. In my case I enabled the x overflow to scroll the screen. I'll test some cases to try reproduce your issue. If you could send us a piece of your HTML which is doind that, it will be much appreciated.

[marcosrocha85]

I've looking for a possible way to do that and came to JoshyFrancis/drag_auto_scroll.

[omateuscastro]

+1 not working for me too.

[ZackTech]

If you are talking about dragging an item from one kanban board to another and wanting to horizontal scroll at the same time then this is also an issue for me. Will anyone come up with a fix?

[marcosrocha85]

I'm trying to integrate JoshyFrancis/drag_auto_scroll with dragEl event of jKanban, but still no success. I'll keep trying to find any reasonable solution. Any help would be handy.

[segheysens]

Just came across this library and I like the idea of this functionality.

If I get around to integrating this tool into my project, I'd definitely want this feature - happy to take a stab at this functionality at that time, but generally speaking, I think the logic required would need to:
• Track when the user is dragging
• Calculate pixel width of the kanban container and determine the area where the left and right buffers are to determine when autoscrolling should happen
• Scroll the window
• Track when the user moves out of the buffer/ends the click/reaches the end of the scrollable area to stop scrolling

[markitosgv]

Any updates about implementing with JoshyFrancis/drag_auto_scroll?

[markitosgv]

Great news!

I've got a nice solution. Using this library: https://www.npmjs.com/package/dom-autoscroller

        var kanban = new jKanban({
            dragBoards: false,
            element:'#kanban',
        });

autoScroll([
        document.querySelector('.kanban-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 && kanban.drake.dragging;
        }
    }
);

Works like a charm!

[marcosrocha85]

Thank you so much @markitosgv

If @riktar agreed, I can integrate dom-autoscroller inside jKanban in a pull request.

[tnetsch]

@markitosgv I have tried to to add the dom-autoscroller (using your code snippet) to my jkanban-boards, but it did not work. Did you use the dom_autoscroller.js from the dist distribution? Did you add something magic .css code to the jkanban containers? Of course it would be nice to have the autoscroll as well when dragging elements within an individual board and also between the boards ... @marcosrocha85 any news on the pull request?

[markitosgv]

Hi @tnetsch ,

I'm using dist/dom-autoscroller.min.js after loading jkanban.min.js.

[marcosrocha85]

Dragula has a problem about this. For now, I think the suggestion @markitosgv fits fine.

[JCD5flow]

Great news!

I've got a nice solution. Using this library: https://www.npmjs.com/package/dom-autoscroller

        var kanban = new jKanban({
            dragBoards: false,
            element:'#kanban',
        });

autoScroll([
        document.querySelector('.kanban-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 && kanban.drake.dragging;
        }
    }
);

Works like a charm!

Hello, thanks for solution,but, no charm with me... have a new solution today ??

[marcosrocha85]

Since original dragula's issue is currently open. I fear there's no solution yet.

[JCD5flow]

Since original dragula's issue is currently open. I fear there's no solution yet.

Thanks a lot for your answer, I'll wait the great solution !

[WriterStat]

With dragula not being maintained for the last few years, and with jkanban being built on top of it, maybe it's time to decouple/abstract it from the code and allow Sortable and others like html5 scrolling libs to be plugged in?

I know it's built on dragula for most everything....but...there are at least two/maybe three real show-stopping scroll items in jkanban when trying to drag or scroll, even just in the drag container, both on regular laptops and on any mobile/touch device.

Limits the use of this library, even as a bounty software.

Cheers,

[worstenbrood]

Great news!
I've got a nice solution. Using this library: https://www.npmjs.com/package/dom-autoscroller

        var kanban = new jKanban({
            dragBoards: false,
            element:'#kanban',
        });

autoScroll([
        document.querySelector('.kanban-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 && kanban.drake.dragging;
        }
    }
);

Works like a charm!

Hello, thanks for solution,but, no charm with me... have a new solution today ??

try using autoScroll([
this
],{
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 && kanban.drake.dragging;
}
}
);