JQuery UI draggable/droppable not working in responsive
July 21, 2017 12:00 AM
I’m trying to build an interaction (Lectora 16) where the user must drag a number of things to a single drop zone. I’ve built it using JQuery UI (draggable), and it’s working perfectly in a non-responsive course – but it fails in a responsive course.
I don’t need this interaction to be responsive (I will just do something else for the other layouts), but I’d really like it to work for the desktop view-
What are my options??
Discussion (4)
I think your best option would be just to use a drag and drop question. There used to be a restriction that you could only drag a single item to a single zone, but you can set them up as "buckets" now and drag as many items in as you want.
That's really great, thank you!!
I'll elaborate on my use case, though, since I don't see how I'd leverage the question object for this one...
I have three drop zones (representing different insurance coverages), and 7 draggable objects (representing statements about the three insurance coverages). The user has to drag each statement to the insurance coverage it relates to:
- Statements 1, 5 & 7 should be on Drop Zone A
- Statements 2, 4 & 6 should be on Drop Zone B
- Statements 3 should be on Drop Zone C
How would I set that up?
You can select Drop Zone 1 for several Drag Items as "correct". You should uncheck "Snap Drag Item to Center of Drop Zone" to prevent the items from being stacked on top of each other.
Or try Greensocks Draggable that works in RCD. As far as I know jQuery UI has problems with detecting Touch events, so it's not Lectoras fault it's not working.
Discussions have been disabled for this post