Search code examples
javascripthtmlcssjsplumb

JSplumb scrollable container

I'm trying to make a JSPlumb application somewhat like the demo here, where the container element scrolls when you drag an item towards the edge of the screen. So far I have this example, where the elements are draggable, but they are constrained by the container around it, greatly limiting how many of those elements can be on the screen.

I initiate the draggables with this snippet. Perhaps there's a scrollable attribute here that works?

jsPlumb.draggable(newState, {
    containment: 'parent'
});

I cannot for the life of me find out the what exactly makes the other one scroll, I tried changing the css and adding some jqueryUI attributes to the draggable object, but to no avail.

Does anyone with more JSPlumb experience have an idea on how I can make the container expand?

TLDR: How to make my draggables scroll like this example

Solution

  • I finally got the answer, It was a CSS thing. I looked closely for the CSS at the demo and found these two classes.

    .jtk-surface {
    overflow: hidden !important;
    position: relative;
    cursor: move;
    cursor: -moz-grab;
    cursor: -webkit-grab;
    touch-action:none;
}
.jtk-surface-nopan {
    overflow: scroll !important;
    cursor:default;
}

    Once I added these classes to my container div and removed the "container" property from the draggable init, it worked!

    jsPlumb.draggable(newState, {

});

    Check out the working pastebin here!