using GSAP to move object doesn't update SL internal Drag & Drop properties ?

Apr 10, 2024

Hi all,

I'm trying to make a pairing drag & drop, but I don't want to use built-in template since I want to be able to change dropable objects shape, drop zone shape, and I want to count the number of correct pairs rather than having a global correct/wrong result for the whole.

With a "pure" SL approach, for 5 objects and 5 drop zones (+ background which is a 6th "null" drop zone that resets the object to it's inital position), I would have to create too many triggers : for 5 objects 6 triggers depending on the drop zone, and then 5 triggers having to deal with what to do if drop zone was already occupied, by which object : at least 60 triggers...

So I tried to solve this with JS, using the great examples we can find here (mainly coming from Math Notermans,  I will never thank him enough for sharing all this knowledge).

Basically, at the beginning of my slide I store in a JS array the positions of my droppable objects, and initialise another empty 5 entries array that will store the name of the dropped object for given drop zone.

For each drop trigger, I call a JS function I wrote passing it the name of the dropped object, and the name of the drop zone.

In this function I get my 2 global arrays, and there :
- if drop zone is background, reset dropped object to it's initial position using GSAP
- otherwise, if drop zone contained a previously dropped object, reset it to it's inital position using GSAP
- if dropped object was previously on a drop zone, erase it's name in drop zone array
- store dropped object name in drop zone array if new drop zone isn't the background

Now when I test my slide, all seems to work except that objects who get their position reset do not behave correctly when dragged again : there is a big shift between their position before and after MouseDown event.
The best way to understand what I'm trying to describe (english isn't my native language) is to try here : https://360.articulate.com/review/content/24689d06-4392-4bf8-b296-b8adbc0a23fb/review
Drag an object, drop it on the background, then drag it again.

I suspect SL internal drag & drop mechanism to not update correctly when objects are moved using GSAP.

Does someone know a way to force that update, make SL aware of GSAP actions ?

5 Replies
Emmanuel Nédélec

I think I'm getting closer : the shifted position of the dropped object is the center of my background/"null" drop zone...
edit : But even if I remove any trigger dealing "drop on background", I still get this shift...and I miss that particuliar event when a user removes a dropped object from a drop zone.

Math Notermans

Storyline's internal drag and drop functionality for sure works different then GSAP ( or other ) Javascript based dragdrop code. 2 solutions i guess... Either donot use SL's dragdrop...only use GSAP's functionality.... or figure out how to get GSAP talking to SL's internal code. First solution i probably can help with. Second...well not so much...as Articulate too often changes its internal code without notification to developers...so i am not diving into that bottomless pit ;-)

Emmanuel Nédélec

In french there's a saying : "great minds always manage to meet", so I'm glad I came up with what you just suggested, but before reading this last post ;-)
I did dig a bit more about these freeforms and manage to get what I wanted without a single line of JS.
For anyone interested, I attach here my solution, with "how to" explanations on both sides of the stage (english on left, french on right)

HTH, and thank's again Math