This PR is just full of awesome!

This looks fantastic.

What needs to happen for this to be mergeable?

I think it's pretty much ready.

@nguyenj more asking the maintainers.

@bevacqua can you or someone else take a look at this when you have a free moment? Thanks!

Happy to help triage, as well.

+++1 for this...

Just wanted to pass along some info...
I just pulled this fork into a Kanban board application I have and I'm not getting expected results... Does this fix support only scrolling when it reaches the edge of the browser? or also of the containers, which themselves could have fixed height with scrolling bars?
The issue (for me) seems to be around the getScrollContainer function... it seem to be returning the node provided on input every time... To give you an idea of my use case, I am working with the following screen:

Looks like for my use case, where I want each container to be able to scroll vertically when I move the card over it, I will likely need to write something custom... Hopefully dragula provides me with enough events to be able to do it without having to fork the library.

/Paul

@purtuga can you provide me a jsbin example? I have an example setup on the index.html for scrolling within a container. It would be easier to debug your issue if I'm able to see the markup and css.

Hi @nguyenj, thanks for responding...
I don't have a public version of this app, but let me see if can setup something so you can take a look...

@nguyenj Could use use requestAnimationFrame / cancel via raf? This way we can support older browsers too 👍

@nguyenj I setup a quick prototype here: http://jsbin.com/mahuwitani
I included the latest code from your fork's dist folder... I do see the containers scrolling as you drag a container child close to the edge of them, but am also seeing some weird behavior on multiple containers... Example: if you pickup a item and drag it across multiple containers, but close to the bottom edge of each container, they start to scroll by themselves... sometimes not stopping..

This prototype is also setup where the body of the window does not have a horizontal scroll, but rather, the element around the containers does... I don't believe your push is meant to address this use case (custom viewport elements), but wanted to provide you with a sample...

Thanks for your time on this and for contributing back.

looking forward to this PR can be merged into Dragula ASAP

@purtuga That's interesting; thanks for pointing that out. I'm not sure if I'll be able to address your particular issue with dragging in multi-directions. I suspect the issue to be that, it's only looking for the closest container "type" to that item and checking to see if it's scrollable-that's probably why it's not scrolling horizontal because the parent to the item is vertically scrollable.

@nguyenj Thanks for the reply.
Yes, I figure my need would be a little different - basically dragula would have to support an input option that told it what the "scrolling view port" is... Your changes, I hope, will help me in my use case, since they will handle the scrolling of each individual droppable area... I think that I can then get my other need working by listening to dragula events and scrolling the horizontal viewing container myself.

Hi guys, when do you add this PR into dragula? I am looking foreward to use this awesome feature :)

@bevacqua Let me know if there is anything else–I pushed up a simple raf polyfill.

@nguyenj
I was able to fix my use case: scroll the area horizontally (a fixed-width DIV) when user drags card close the left/right edge using the drag and dragend events... Now I'm looking forward to @bevacqua merging your change in, which will complete my UX goal for what I'm working with...

@gxzhou519 your issues should be fixed.

Thanks @adam-h!

Tests are passing locally; but not entirely sure why CI is failing.

@nguyenj are you running the tests locally with the same configuration options as on Travis?

@joshsmith The only thing that is the same that I am running from .travis.yml file is node 4, everything else is on a mac.

When will this be getting merged?

I see that there was some activity. Is there an ETA on this being merged?

Good question! I have no idea.

Wow, what do we need to do to get this merged? :O

ESSENTIAL for this great piece of software

@nguyenj Does this cover the case where the elements that you want to scroll are not always Dragula containers? For example, you have a Kanban style board, which has overflowed the viewport, and you want to scroll the viewport when you approach the top/bottom edges such that you can place cards in different vertices? Essentially, initiating a page scroll on an entire page instead of just the containers.

Any ETA?

Awesome. I tried out these change though and couldn't get it to work when i wanted to scroll to a container that wasn't currently in view. I made some modifications, but I'm unsure if this would make the package better or if this a use case specific to me.

Essentially I'm checking the need to scroll when looking to see if I'm over a target that is dropable, and removing the mouseEvents from the startScroll function and grabing them from the params passed into findDropTarget.

function findDropTarget (elementBehindCursor, clientX, clientY) {
   startScroll(_item, clientX , clientY, o);
   var target = elementBehindCursor;
   while (target && !accepted()) {
      target = getParent(target);
     }
   return target;
 ...

 function startScroll(item, pageX, pageY, options) {
    var scrollContainer = getScrollContainer(item);
    caf(_autoScrollingInterval);
    / / If a container contains the list that is scrollable
    if (scrollContainer) {
      var scrollingElement = null;
      var scrollEdge = options.scrollEdge;
      var scrollSpeed = 20;
      // Scrolling vertically
      if (pageY - getOffset(scrollContainer).top < scrollEdge)
          ...

@gardinit sorry I’ve lost interest in pursuing to modify this PR as it seems that this library is in active and the author seems to have stopped maintaining this project-just take a look at all the unresolved issues and open PRs.

I'd say that sadly this library should be considered dead. Given the lack of response form the author to PRs and issues he's moved his focus else where.

So those looking for a similar solution (with working scroll when dragging no less) would be well served with draggable

https://github.com/Shopify/draggable

That's indeed what I've switched to @pete-hotchkiss
It works great!

Lukas

I have switched to https://github.com/clauderic/react-sortable-hoc with great success!

Is there a fork with this PR?

@danielehrhardt You can see if https://github.com/benelliott/dragula works for you

@danielehrhardt have you looked into https://github.com/Shopify/draggable? The community there is a little more vibrant.

Closing this as this project is DEAD.

⚰️

For those that are stuck with dragula: try dom-autoscroller.
It's this easy to set it up to work with dragula (example taken from the link above):

autoScroll([
        document.querySelector('#list-container'),
        document.querySelector('#container2')
    ],{
        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 && drake.dragging;
        }
    }
);