Drag and Drop adaptation

I have created a drag and drop activity using a jquery approach but have found some inconsistencies with its performance. The attached Hype specific alternative is perfect for my needs and I could adapt, but Im not a programmer, and struggle with the concepts. The .js within this file includes only a function for completion of all matches to trigger another action. All I need to be able to do is start independent timelines off of the individual D&D matches in addition to the completion check. Any advice however trivial or basic would be appreciated.dragAndDropHypeStyle2.hype.zip (53.4 KB)

did a new one ... you may try it:

The enabler is brilliant. I think that is a perfect solution for non-scripting types like myself.
The responsiveness is great, which is why I went with jquery in the first place. I appreciate this work greatly, but I was hoping for a simple adaptation to the original script for the sake of simplicity. I need to adapt this to a number of different exercises and may be too far into it to rethink it. I fully understand that I am not in a position to have any expectations though.

hitCheck returns an object if true.
it consists of:
element: -> the dropped element
id: the id of the dropped element
classList: the classList of the dropped element

element as argument from the hypefunction is the dragged one.

these are the circumstances to work with …

i would set a data-attribute to the droppable elements that holds the timeline to play.

so you can access this on hitCheck … and play it

Thank you so much, that was very helpful. I studied it and could see the relationships much better. I was actually able to progress, surprising myself. I’m still short of what I need to make it work. see the attached if you care to still help on this one, otherwise thank you. dragAndDropHypeStyle2.hype.zip (53.9 KB)

hm, the code you’ve added is senseless … it just creates a boolean resulting in false within the code, but this boolean is not integrated in any functional flow …

why not work as described in my post above?

set a data-attribute to the drop-element:
data-drop -> expectedtimelinename

then receive with:
const myTimelineName = hitCheck.element.dataset.drop

then run the timeline …

I'm having a bit of an issue. The drag and drop code seems to pick up hidden drop targets. We have drag and drop being used differently depending on what timeline is being shown in the scene. Sometimes when we we drag and drop in another timeline it will fire off a hidden drop target custom behavior. Is there any way in the HypeDragAndDropEnabler.js to not include hidden drop targets in the global dragnDropPairs array?

even if the script would exclude elements that are somehow 'hidden' (<- btw hidden by display, opacity, visibility?) it wouldn't be of any help in your setup cause i guess you'd like to switch back when 'visible' ... . that wouldn't work because the script actually runs onsceneload and its drag'n'Drop-pairs are initialized at that moment and won't change ....

////

however the simple workaround would be to place the dropfields that are not needed unreachable to the 'outerfield' untill you need them ... happy eastern :slight_smile:

I was afraid I was going to have to split some of these timelines into individual scenes. To answer your question, I am running a script that makes the assets I don't need have a style.display of none and a zIndex of -1.

I'll have to look into moving the assets in and out of frame based on the timeline that needs to be run.