Interactive drag

Ok, so I’m having great success with these but there is one thing: If I have set the panels that I am resizing to “Animate States”, the script does not work. Is there a way around that?

ok this can quickly go into a rabbit hole :grinning: the way we support the state-animations does break the script. I thought a fix will be easy (you can find it on the second screen in the document, one can simply overwrite the CSS-transition while changing the size). But … then a state-change afterwards may not work correctly, which just happened me (a double-click on the grey-area should show/hide the pane). If it works for you: quit reading and use the script on the second screen.

If not: The change on the first screen is to only drag the „splitter“ if the pane is in the Normal (visible) state.

split (558.5 KB)

That worked perfectly! Thanks! You should really try and make dragging and resizing of the various kinds available as a standard function. I know that’s probably not as easy as I think but it’s just so fantastic to be able to do this!

I have had to slightly change your example because I need the draggable content to not be at the top level but nested inside a parent cell. This seems to break the function: no matter, where I drag the object it will continue to move towards the bottom right corner at multiple times the drag speed. Can I change this somehow so it works inside nested cells?
Drag (446.7 KB)

this should work: Movable.atype (526.1 KB)

1 Like

Brilliant :slight_smile:

I have one more: Is there a way I can set it back to its original position with a button? So I drag it, then I want it to return to its original position. Preferably animated. It is for a floating widget that can be put in a palette. When I return it to its floating state, I need it to gracefully float back to its corner, regardless of where it was before. Currently, it jumps to a different place:
Floating palette

Without animation: Movable and (568.6 KB)

I think with animation I would have to change the other script too … :thinking: