Forum Discussion
SL javascript eventListener for drag events
I am trying to add an event listener to a storyline 360 object using javascript. If the event listener is for a click, it works. But if the event listener is for any kind of dragging event, it doesn't work.
this works (console.log registers "click"):
testStar = document.querySelector("[data-acc-text = 'testStar']")
testStar.setAttribute("draggable", true)
testStar.addEventListener("click", (event) => {
console.log("click");
});
this doesn't works (no result in console.log):
testStar = document.querySelector("[data-acc-text = 'testStar']")
testStar.setAttribute("draggable", true)
testStar.addEventListener("dragstart", (event) => {
console.log("dragging");
});
Does anyone have experience in using javascript event listeners involving dragging in storyline 360?
Yes, i use GSAP drag with events. Works fine.
- MathNotermans-9Community Member
Yes, i use GSAP drag with events. Works fine.
- AdamZamczykCommunity Member
If you need to track drag and drop event, I would suggest to add variables (so they change when an object is dropped, or when the object state changed status to Dropped) and then JavaScript can listed to these events (variable changes). Just important to remember than an item can be dragged back to he initial position or can be replaced with another object (and get back to original spot automatically.
- DaveHendryCommunity Member
Thank you both. AdamZamczyk, I did implement what you recommend for a drop event involving the same object; the difficulty was that I needed triggering based on dragging only, for 279 separate elements, which I could do in SL but found onerous and unreliable. That's why I wanted to use javascript, but what I've found is the triggered javascript code apparently does not recognize drag events. So I ended up using a workaround based on the position of my draggable object (using getBoundingClientRect(). MathNoterman-9, I understand that I could also do it with GSAP, thank you.