Draggables do not snap to drop target in html5


I am publishing out to html5 for tablet as learning management system does not support the articulate mobile player app. So anyway, it is just html5 publish for tablet, I have unselected the "Use Ariculate Mobile Player for IOS or Android".

So, here is my issue on runtime


You will need to look at that screen on say an ipad (i.e a device not supporting flash and using the html5 version).

When doing so, you will see that on my basic drag and drop, despite choosing "Snap dropped item to drop target" for the drag and drop settings, they don't snap to the target. They do in flash, not in html5. So why is this a problem? Well it is a problem because the user can't then get the question correct, as they are very unlikely to be able to make draggables line up to the pixel to the drop area and won't have the patience either. It is supposed to snap to target and it doesn't. The result being, as far as I can see, drag and drops don't work on an ipad because the draggables don't snap to target rendering it useless.

Storyline file attached, only 2 screens. I have done a search on this and not seeing any related queries, so am hoping it is something I am doing. I was thinking (and certainly hoping) that something as basic and fundamental as a basic drag and drop working in html5 on an ipad was covered in Articulate Storyline.



2 Replies
Rupert Abel

Thanks for your helping hand Leslie. Seeing what you did there with yours, I notice that the text part of yours was happy to snap to target. With this lead, I have worked out what mine doesn't like. What it doesn't like is the fact that my draggable rectangle has two things in it, an image and then text box on top. It is the image causing the problem. If I get rid of the image beneath the text, it is as happy as larry! I have a lot of these to change, but at least it will work!

Incidentally, this was fine in Storyline 1. It was the upgrading of this source to Storyline 2 where the bug has crept in. BTW, importing into a new source file did not make any difference, it is distinctly the image in that rectangle which is the issue. Thanks for your help.