Drag Items Stuck Behind Targets

Feb 29, 2024

Robert Lengacher
By Robert Lengacher

Storyline's built-in Sequence Drag and Drop is buggy for our users and impossible to beautifully customize, so I'm working on a freeform sequence drag and drop quiz slide for my Storyline devs to use. Everything seems to work well, except that after the drag items are moved many times, some shift below the targets. On my timeline, the drag items are at the top and the drop targets are at the bottom, so I have no idea how this is possible. I've formatted the targets to have no fill so the drag items are fully visible when this happens, but it's frustrating because sometimes the drag item is not draggable when it's behind the target. I'm not ready to share my production file publicly yet, but you can play with it on Review 360 using the link above. Any ideas?

4 Replies
Walt Hamilton
2 months ago02/29/24 at 9:07 pm (UTC)

I can’t get it to do that, and I’ve dragged one up and down dozens of times on an ipad, and usually if something is going to go wrong dragging it, it will happen to ipad users. So I’ll take your word for it, and no, it shouldn’t happen. The whole concept of dragging something is that it goes above everything else, even objects that are higher than it on the timeline. I suspect some sort of bug, or more likely, a corruption somewhere, but I don’t think you will get anywhere filing a support ticket, unless you can reliably reproduce the behavior..

Math Notermans
2 months ago03/01/24 at 9:30 am (UTC)

I tried too.. Couldnot get it stuck behind a target either. Have to admit though that the look as is, it is quite hard to see what you dragging and dropping where. But as said... i do think it worked as planned.

One solution to things somehow getting stuck behind other elements is changing z-depth.
Some functions i use a lot creating custom Javascript based DragandDrops.

var someElement = document.querySelector("[data-acc-text='myElement1']");
var otherElement = document.querySelector("[data-acc-text='myElement2']");


function changeZ(element1,element2,param1,param2){
     gsap.set(element1, { css:{zIndex:param1}});
     gsap.set(element2, { css:{zIndex:param2}});
}

changeZ(someElement,otherElement,2,-2 );

This way you can change ( or swap ) the z-index, thus it being on top of every Storyline element.

Robert Lengacher
2 months ago03/01/24 at 1:27 pm (UTC)

Thanks, Math and Walt. I'm glad this is worked for you. Math, I appreciate your Javascript tip. I know you have a ton of scripting tips on the forums, so I'll see track down where you've posted about drag and drops. I didn't use Javascript on this, but I believe it would be much more efficient than my approach. 

Sign In to Reply