Prototyping a drag & drop quiz for touch (mobile phone)

seb lt shared this question 9 months ago
Answered

Hi,

Is it possible in Justinmind to prototype a drag & drop interaction between to individually scrolling areas, which works on mobile phone (touch) screen?


  1. Area 1: vertically scrolling area (fixed height) within the page, containing a number of draggable items
  2. Area 2: vertically scrolling area (fixed height) within the page (say below area 1), containing two droppable target areas
  3. Long Tap on draggable item activates dragging behavior
  4. Drag item out of Area 1 into a droppable target area in Area 2
  5. Drop item, and item snaps into place in the target area within Area 2

The key point here is to have Areas 1 and 2 as vertically scrolling areas within the page, to keep both areas visible on the phone screen in case there are many items involved.


An example would be dragging and dropping images of vegetables and fruits from Area 1, to either a "Vegetable" droppable area, or a "Fruit" droppable area in Area 2.

I'm curious to know if Justinmind can prototype this, because other tools don't appear to have this capability.

Comments (12)

photo
1

Yes, this is definitely possible. Check out this tutorial: https://www.justinmind.com/support/drag-and-drop-elements-between-lists/

photo
1

Ok, I'll try to give it a shot.

photo
1

Hi there -

So I was able to make some progress and try to build what I had described earlier, but ran into some issues:

  1. One of the droppable areas isn't working (the "GUYS" panel)
  2. I'm not able to set the User objects' width to 100% as opposed to pixel value
  3. I'm not able to test the scrolling behavior with the simulation
  4. I'm not able to test this out on an actual mobile device

I tried to attach my .vp file with this reply but it won't let me :(

photo
1

You can compress the .vp to .zip and you'll be able to attach it here.

photo
1

Thanks Danielle - here it is attached.

photo
1

1. The issue was that you needed to define the "On Drag End" + "Insert Into" event for each user, and insert them into the 'Guys' panel.

2. If you group the User objects in dynamic panels themselves you'll be able to assign them a % width.

3. I am able to scroll within the dynamic panels that have some overflow. There's no scroll on the screen itself because there's no content extending below the screen. Is that what you're referring to?

4. Make sure you have the Justinmind View on Device mobile application installed on your phone. It's available at the Google Play Store as well as the App Store for iOS. Once you have that downloaded, sign into it. Then, back in the Justinmind desktop application, go to the 'Simulate' tab at the main menu bar, click on it, and then click on 'view on smartphone/tablet'. You'll then be able to go back into the mobile application and click on 'view on device', and the prototype will open on your phone.

photo
1

Thanks Danielle.

  1. Sadly I am not able to see the events - because my trial expired long ago.
  2. Got it
  3. I see what you mean. Will try again.
  4. I downloaded the "Justinmind" mobile app on my iPhone but when I try to log in, it gives me an error. Attaching screenshots. I made sure it's using the same credentials as my desktop JIM app.
    97956fd8406cff92e935c8244a41f9c299e68b23374e2a1a4fc4715879a21ce3

photo
1

Unfortunately after your trial expires you won't be able to use the mobile application. If you would like to be able to add other events and view your prototype on your device, you'll need to purchase a subscription.

photo
1

Ok no worries. I was able to get a new trial going on my old laptop with a new account. I really want to test out JIM's capabilities before purchasing, and the last time I had tried it was several years ago.

Anyhow, I've made more progress on the interaction thanks to your help. Now running into some new issues:

  1. Bug? When dragging the items back into Panel 1, it doesn't work when dragging the items inside the top part of Panel 1. It needs to be dragged further into Panel 1. Is there a way to fix that?
  2. Why can't we lock the position of the GALS/GUYS title, in order to avoid dragging an item on top of it (see attachment)
  3. Bug? On my iPhone (SE) while using the mobile preview app, a vertical white band appears on the right (see attachment)
  4. Most problematic for the intended behavior, is that the drag event gets in the way of vertically scrolling within the panels (because scrolling is similar to dragging). What I was thinking of doing was to use the "On Tap Hold" event to trigger the Drag event. That way vertically scrolling would happen normally, and only on Tap Hold would the drag behavior happen. How do we have both dragging and vertical scrolling (when there is overflow of course)?

Thanks again for all your help! Attaching source file.

8ed4f29fb25f349ba1a42d156a0cf01e

photo
1

1. Unfortunately this is a limitation, so you won't be able to fix that.

2. We can do this, but you'll need to have a panel that contains the title that is detected as the 'droppable' area, and then another panel where the users will be inserted into. I've done this for the 'guys' panel. You'll need to do the same for the 'gals' panel.

3. We haven't been able to reproduce this yet. What are your simulation settings? Click on the 'gear' icon next to the green simulate button.

4. We could do a workaround for this using padding, but it's not ideal (you still get a double-scroll effect). Instead, showing a standard 'drag' icon when the users are within the panels and using that for dragging rather than the hotspot would work. I've done for this all the users, and it works for the 'guys' panel. You'll need to do the same for the 'gals' panel'.

photo
1

Thanks so much Danielle, I'll take a closer look at it this weekend.

  1. Do you mean it's impossible to fix? Not sure I understand the limitation.
  2. I see. So I'm noticing that a lot of solutions involve putting things in their own dynamic panels. Question: Is there a reason why we cannot drag layers from one dynamic panel to another (from the outline pane)?
  3. I'll send you a screenshot

Regarding #4 yes I see what you mean. Not sure if this has been requested before, but it would be nice to be able to set the "On Tap Hold" to trigger a Drag event on the object which was tapped on. This would open the door to all kinds of interactions involving a scrollable/pannable content areas, and drag & drop.

Thanks again for all your help.

photo
1

1. Yes, right now this isn't possible to fix.

2. Can you clarify this question? You won't be able to drag one panel from a dynamic panel into another dynamic panel, if that's what you mean.

3. Can you attach that screenshot?

4. Yes, we see how that could be helpful. I'll let our team know that's requested.

photo