Scroll to horizontally is not working about jkanban HOT 17 OPEN

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!

from jkanban.

Thank you so much @markitosgv

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

from jkanban.

@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.

from jkanban.

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

from jkanban.

+1 not working for me too.

from jkanban.

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?

from jkanban.

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.

from jkanban.

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

from jkanban.

Any updates about implementing with JoshyFrancis/drag_auto_scroll?

from jkanban.

@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?

from jkanban.

Hi @tnetsch ,

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

from jkanban.

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

from jkanban.

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 ??

from jkanban.

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

from jkanban.

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 !

from jkanban.

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,

from jkanban.

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;
}
}
);

from jkanban.