Skip to main content
I
iDoNotBelieveIt
Known Participant
July 12, 2022
Question

Implementing an image-based drag-and-drop in a responsive project

  • July 12, 2022
  • 1 reply
  • 346 views

I was wondering if anyone has experience in implementing a drag-and-drop style question in a responsive project that will have targets related to specific parts of an image. For example, you might want to identify countries by chosing from a selection of flags and dragging to the respective country. I would set up the map on the background then define the targets and sources.

 

The challenge I have found relates to the image aspect ratio and maintaining the relationship of the drag targets to the respective parts of the image. What happens is that if the image aspect ratio is maintained, the drag targets lose their relationship to the image (they move). For my purposes the image aspect ratio must be maintained.

 

I have followed the instructions in the docs (https://helpx.adobe.com/uk/captivate/using/drag-and-drop-interaction.html) but it doesn't work for me.

 

I am probably missing something, so advice as always is much appreciated.

    This topic has been closed for replies.

    1 reply

    Lilybiri
    Lilybiri
    Legend
    July 12, 2022

    Could you please insert some screenshots to explain? 

    Did you use Fluid Boxes or Breakpoint views for the responsive project? 

    I
    iDoNotBelieveItAuthor
    Known Participant
    July 12, 2022

    Hi Lieve,

     

    Thanks for reply. I am using fluid boxes. I will create somescreenshots to share.

     

    I need the image to maintain its aspect ratio and for the drag targets to be fixed to the specific parts of the image when viewed on different devices. I have tried adding a slide without a fluid box and locking the size and position for the target, but this only works in landscape orientation on my phone.

     

    I hope I can get this to work, but if not I will adopt a different approach.

    RodWard
    Community Expert
    RodWardCommunity Expert
    Community Expert
    July 12, 2022

    I think you may find that you are attempting something here that is NOT a good fit for a responsive project.  The HELP page you referred to shows only a very simple drag and drop interaction where one object is also the Target for the Drag Object. 

     

    In that situation the position of the Target is not as problematic because even if it move around somewhat the Drag Object can successfully attach to it and register a hit.

     

    If I understand you correctly, what you are trying to do is have a Target area remain positioned over the top of another background image and then have a third object as the Drag Object.  That's asking a lot of a responsive project.

    May I ask WHY you specifically must have a responsive project?  Are you really expecting that a larget segment of your target audience is going to be using mobile phones to view your content?

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices