Scale drag source and drop target equally

Question

I'm making a drag and drop interaction where I want the learner to drag cells (that is, shapes with text in them) into a blank cell in a spreadsheet.

My problem is that I can't get my drag sources and drop targets to scale at the same rate. So when I test it in any resolution other than desktop, the drop sources doesn't fit the drop targets.

I've tried making sources as both shapes and SVG images, and I've tried keeping them in both static and non-static fluid boxes. I've also tried locking the size and position for both targets and sources.

For the drop target, I first tried to make an SVG of the entire table and then placing shapes for the drop targets (putting it all in a static fluid box). I also tried making each row a fluid box, with a text caption and two shapes.

Does anyone have a suggestion for how to design this? Maybe there is a clever solution that I'm not seeing.

Below is a sketch of is what I want it to look like. The green drag sources should fit into the white areas in the blue rows.

Lilybiri · Answer

It is responsive project, right?When working with Fluid boxes it is not possible to have overlapping objects in a fluid box, unless for static fluid boxes. I wonder if working with Fluid boxes is a good choice in this case, personally I would switch to Breakpoint views, although it means a lot more work.Another idea, but it depends on what you exactly want: is this a scored D&D or not? You could use the InBuilt states of the D&D objects, or use the object actions, have the drop source disappear but a state with the same text as the drag source appear in the drop target. Just some ideas.

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded