riktar/jkanban

JKanban drag and move not working properly when we use the mobile view

oricosta88 opened this issue · 12 comments

oricosta88 commented

Hi recently we implemented into our website a mobile view for mobile, tablet users and one of our pages use JKanban. When we change the view into mobile the jkanban shows fine and the events of click and selectable works too, but when we try to drag or move the Kanban element it just buggs and instead of moving the Kanban it scrolls to the sides or up depending of the movement. It is a way to change the kanban into mobile mode or i would need to change some functions to make this work? I was wondering if could change the drag function and stop the scroll in that moment.

I attach a video of the JKanban bugged
https://youtube.com/shorts/_SMIM9Owsjg

WriterStat commented

Hi, hope this finds you doing well. I think I can help you.

Quick question: Is this a personal site? Open source? A company site? Or a client site?

I have developed a fix, that we use in our software which works well for mobile, tablet users, and touchscreens, but need to know the above, thanks.

I hope I'm not overstepping my bounds in saying that the current library doesn't internally come with this.

Best, -Wrtr

marcosrocha85 commented

Hi, hope this finds you doing well. I think I can help you.

Quick question: Is this a personal site? Open source? A company site? Or a client site?

I have developed a fix, that we use in our software which works well for mobile, tablet users, and touchscreens, but need to know the above, thanks.

I hope I'm not overstepping my bounds in saying that the current library doesn't internally come with this.

Best, -Wrtr

Actually you're right. jKanban was developed to be a vanilla javascript package, it actually uses Dragula to do the drag-n-drop feature but that's all. I'm not the owner of the project, but I think we should upgrade it to a more embracing solution. I made a Trello like kanban with this plugin, but I had to do most of it by hand in the code. @WriterStat if you could share your fix in here, that would be great. Thanks in advance.

rouilj commented

Maybe applying:

touch-action: pan-y;

to the body of the kanban will do the trick?

I limited it to the x direction since I assumed the kanban columns wrapped on top of each other, so you would scroll down to drop in a different column.

Also there is an issue on stopping page scrolling while dragging for dragula at: bevacqua/dragula#487.

  • ❤️1