Interactive drag

I added another screen to the minimal-example using a title-bar. You can drag the “window” with it:

resizable (1.3 MB)

It is done using two scripts on the titlebar-cell. Resizing on all sides is a little bit more effort (but definitely doable). Do you have visual “handles”, or like macOS only a cursor-change?

Ah, that works. Thanks! I might have to learn some JavaScript basics after all. I have attached what I am trying to do. The example was done in Origami and took way too long. I had to work out the nesting behaviour (Origami does not have any means to nest elements) and resizing the palettes meant I had to work backwards from the enclosing container’s position. All doable without a single line of code but just not very efficient.
I would not need any visible handles, just a change of cursor, like macOS.

Using the CSS property you can only resize the bottom right corner. Changing the cursor can be done with custom CSS, but you have to put an invisible cell, where the cursor should change and add a mouse over state. By default, it doesn’t change if you use CSS resizing.

Thanks Tim, got that. It wouldn’t allow me to drag the edges though, right?

Correct. It only works in Firefox, but there, the cursor is shown by default anyway.

I tried with Felixs example but it won’t let me drag-resize anything but the bottom right corner, regardless of the browser. It’s no problem for now though. At least it works partially.

Yes, the browser only lets you resize the bottom right corner.

BTW most of the prototyping apps out there are geared towards web design or mobile app design. Things like dragging and resizing windows or floating palettes, let alone dragging a divider to resize panes of a palette or dialog is sorely missing from most. Antetypes greatest feature (for me) is its superior nesting. If there was an easy way to add draggable elements that other elements could bind to, it would be the only app out there that had support for this combination.

Ok, here another one, resizable on all sides (the various handle-cells define the area where the resize is possible). Still not perfect (I defined a minimum size, but do not check it in the resize scripts, etc. ).

resizable movable an all (458.1 KB)



That’s quite brilliant. Thank you! Actually, my comment wasn’t meant to create more work for you. I could have lived with just the bottom right corner :slight_smile:
I was simply trying to say, if Antetype could do these things without the need for scripting, it would have an edge over its competitors. Anyway, this is great. Thanks again!

yes, scripting is not for everyone. So far we are collecting useful snippets and (if time permits) make it easier to use them. Therefor another one: a split-pane: (271.0 KB)

just copy the “vertical handle”-cell in your prototype and set the resizable-cell in the interaction inspector (needs manual-width to work):



You rock! I have just started my first serious prototype in Antetype. This will come in handy. I’ll keep you posted :slight_smile:

Trying to get my head round the script but I am failing miserably. So this is working fine but I need a three-way split whereby the middle element is set to “stretch” and the outer elements are resizable by the splitter. I have had success by nesting these elements but when I resize the browser window, the prototype will not shrink. Any pointers would be most welcome.

If I understand you, this should do it:

split (379.5 KB)

1 Like

Yes, that’s what I wanted - thanks so much. I tried for about an hour before I gave up and asked. If I had the time to learn JS I could do this myself…
BTW this only works in Chrome and FF. In Safari, the splitter lags behind mouse movement but I guess that’s a known issue anyway. Just mentioning it in case it is not.

my fault, I did not try it in Safari or inside Antetype. This should work across the three browsers:

split (380.0 KB)

1 Like

Perfect. And thanks for the comments. It’s still all gobbledygook to me but at least I am starting to get an idea what is going on :slight_smile:

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!