While working on a sidebar panel of an application, I have encountered a unique problem. A user needs to create steps (think in terms of creating an online course via a builder). One can add as many steps as they like. Each of these steps has tons of fields within it. I thought of creating a collapsible card with move functionality. Because a user might feel the need to change the order of the steps. Is this technically correct? Should the drag/move icon come outside the card?Image

  • 1
    Although complex, I don't see a special problem. There's an example in this Stackoverflow Q&A
    – Danielillo
    Commented Dec 13, 2021 at 20:58
  • 4
    From an accessibility perspective, make sure that elements can be reordered by more than just drag and drop. Perhaps allow them to TAB to the "grid" icon and move the element up or down via a special key (eg, shift+up) or via "move up" and "move down" buttons. Commented Dec 13, 2021 at 22:06
  • Good point, just that it needs to be accessible by pointer devices as well, not only to keyboard users.
    – Andy
    Commented Apr 25, 2022 at 9:21

1 Answer 1


You can certainly dedicate areas within a large drag-and-drop surface to do specific things, such as expanding a panel. This can be helped with a visual indicator on hover/ mouse-over:

enter image description here

However, as I've shown above, you might have to think about the panel behaviour once it is expanded. Some designers choose to isolate interactions until done (for example, using a modal), and then hand control back to the drag-and-drop functionality.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.