Search the Community
Showing results for tags 'draggable autoscrol'.
Found 1 result
-
I am trying to have a bezier connector between two draggable divs. I have used the code made by OUSblake at this codepen. So I can make it work, more or less. Draggable works? Check. Autoscroll works? Check. I can draw a bezier between my draggables? Check. The problem happens when I drag either of the the Things to make the area Autoscroll. The bezier seems to forget that it was attached to the divs. When I scroll back so that both of them are in view the bezier re-connects - sort of. The connection is apparently very loose because it breaks when you scroll the window with a mouse wheel or by using the scrollbar as well as when you scroll while dragging. Editing this post again! I just realized that the script only updates the curve onDrag! That means it does not update when scrolling is happening. Wondering now how to approach that. Really, Autoscroll is not what I originally wanted. I want draggable on the divs so they can be moved.. But I wanted to also make the Playground pan and zoom. So instead of scrolling by dragging only also pan and zoom the area like in a maps application. Eventually, I want to take this proto-type and use it to create a content rich kind of "flow-chart". Basically, think of Thing 1 and Thing 2 both being filled with content - text, images etc. All of it will be added via DOM manipulation when buttons in an accordion menu are clicked. Let's say that I open the menu and click on Thing 1. it opens and is draggable and filled with content. On thing 1 is button that says "Thing 2". Click it and Thing 2 will open next to Thing 1 with a bezier connector between them. You can think of it as a simplified version of a node editor. I don't need for the user to be able to drag and drop the connectors between blocks. I also don't need to have the user delete or cut the connectors. (both of them are typically feature of node editors but not necessary for my design.) So, anyway, that is the goal. None of that will work if I can't figure out how to stop these things from losing the connection with the curve when you autoscroll. Any help and suggestions will be appreciated!
