Scrolling panel and drag & drop (HTML5 output)

Feb 11, 2016

I'm trying to build drag and drop activity on Storyline2. I need to add the draggable items in a scrolling panel. When I publish, the flash output works fine, but not the HTML5 output. Any ideas?! 

Thank you.

10 Replies
Hafizah Suleman

Hi Guys,

Glad I came across this thread.

I am also having issues of a similar nature.

I have created a drag and drop within a scroll bar, and the HTML 5 version is being buggy when published version is viewed in Chrome, IE and Firefox (more so in the latter two). It's buggy in the following way:

- A delay in the dropped items showing up in their drop location. Dragged item only shows once you click your mouse again. Drag the next item and same thing happens

My current workaround for the time-being is re-directing the student to a lighbox by clicking on a marker, allowing them to complete the drag and drop, they then close the lightbox and continue with the rest of the interactions in the slide.

I've submitted a support case: #00790235

Hafizah Suleman

Hi Leslie,

Thanks for checking up :)

I received a workaround from Abel. I'll share it here, just so as to help other designers:

"It appears to be happening when you add drag items and drop target into a scrolling panel in a Drag and Drop interaction. Also, this is happening when you set the snap dropped items to drop target option to "Tile, Stack Offset or Free" in Drag and Drop Options. I have submitted your case to our Quality Assurance team for their review.

As an additional workaround, you might want to consider setting the snap dropped items to drop target option to "Stack Random or Snap to center" in Drag and Drop Options."

I have applied this workaround and it allows the interaction to work, it's no longer being buggy.

Just as an additional note, I noticed that the mouse pointer does not change to a hand pointer in HTML 5, when hovering over the drag-able items. I have flagged this to Support.

:) :)

Ghada Muhammad

Hello all,

This workaround might not work for me as my drag and drop option is already "snap to center", but my friend noticed something. When the dragged items in a scrolling panel and the drop target outside it, the bug shows up, but when we move the drop target inside the scrolling panel it works fine. It seems that the scrolling panel cuts the connection between the draggable items and the drop target.