Comments (17)
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-autoscrollervar 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.
Related Issues (20)
- Checkbox is not working on board HOT 21
- dropEl function for sorting boards HOT 4
- Uncaught TypeError: Cannot read properties of undefined (reading 'dragTo') HOT 1
- Header of kanban boards - adding a button HOT 5
- Footer button to add items on a specific board HOT 8
- HEX colors for boards headers HOT 2
- Browser context menu disabled - how to enable. HOT 1
- Which js minification software does jkanban use HOT 2
- can i add Kebab menu to kanban-item to i can drag item to anther id ??? HOT 2
- importing jkanban/dist/jkanban.min.js file throws an error HOT 4
- How to get item id when clicked HOT 1
- JKanban drag and move not working properly when we use the mobile view HOT 3
- replaceElement API Issue cause click function fired multiple
- Pagination support HOT 4
- collapsible Board
- Disabled element completly not interactible HOT 1
- import problem with vite HOT 2
- Width
- Uncaught ReferenceError: global is not defined HOT 4
- Limit number of boards to be created
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jkanban.