Dragging the cursor to select multiple elements?

Adavis shared this question 8 months ago
Answered

How to prototype a user clicking and dragging the cursor to select multiple elements like in the attached file? Thanks.

Comments (2)

photo
1

Check out the attached example. It's a little complicated, but here's how it works:

  1. The Selector itself is a Rectangle with transparency. It's set to 100% transparency when nothing is selected.
  2. When you start dragging the Selector Rectangle, it will move to the position of the cursor and change the transparency to 80% so it's visible
  3. When dragging the Selector Rectangle, it will resize according to the position of the cursor minus the position of the Selector Rectangle
  4. When you stop dragging, 1 of 7 Dynamic Panels will be set as active. Each contain one version of the possible selections you can make - i.e. all of the options are selected, only the middle, top, bottom etc.

Let me know if you have any questions.

photo
1

Thank you, Danielle! This was exactly what I was looking for.

photo