I’m looking to create a desktop prototype that relies on a selection of elements via a selection box (like you see when dragging to select files on the desktop). Basically, when I click and drag, I want a selection box to appear and follow my cursor as I drag.
Is this doable?
Hi there!
There’s a way you can emulate it, the only trick is that you’d need to start the click+drag to select in the right point, this may not work for user testing as you may not control where exactly they will start the selection, but more or less is pretty intuitive where people would start.
The way I’ve done it, is using an invisible layer with drag behavior, this way I can use the x and y movement of the drag in the drivers to give opacity to my selected items, at the same way I use those values to make the selection rectangle grow accordingly.
This is the final result:
This is how the driver timeline looks, note that I use the drag-Y value to change the opacity of my item background layers, and at the same time this drag-Y value controls the selection rectangle Height and Y-Position.
Drag-X only takes care of the selection rectangle Width and X-Position.
If you don’t control the X/Y-Position, the selection rectangle would grow from the center, not from the top-left corner.
Of course, for this effect to be credible, ideally you should start dragging from the top left corner (a bit outside) of the items panel.
Attached is the .prd file if you want to check, at least for myself, checking other people’s source files is the best way to learn, maybe some other people would approach this in a different manner, I’d love to see how other people would do this.
Hope it helps!
Wow! Thanks! This looks great!
This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.
