Search code examples
javascriptjqueryjquery-uidraggabledroppable

Making droppables only accept certain draggables?

I feel like this could possibly be a concept a little complicated to explain out of context with the actual website I'm doing, so I'll explain why I want to do this, which should help you understand what I'm after.

Basically I'm making a kids nutritional website. The page in question requires the kids to look at a little food groups image, and recreate it using draggables and droppables on the next page.

website screengrab

Each of the food images on the right are draggable, and each colour on the left has an invisible droppable div on top. The idea is that after the user has dragged each piece of food on to the correct colour, then a splash screen would appear to show that they're correct. But this would only happen if each food draggable is in the right droppable.

I am fairly inexperienced with javascript and jQuery, and I have no idea where to begin. Any help at all would be greatly appreciated.

Solution

  • I eventually figured out a way to do it using the accept option, and implementing a counter to determine when the correct colour was full. See working fiddle here.

    The only issue I have with this method is it won't let you make any decision other than the correct one, so you could mindlessly go for trial and error to complete it. But since my application will be dealing with children, that perhaps isn't so important.