CODEWITHSUNDEEP
javascriptjqueryjquery-uidraggabledroppable
Sam Barnett
Sam Barnett

Reputation: 27

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.

Upvotes: 1

Views: 90

Answers (2)

Sam Barnett
Sam Barnett

Reputation: 27

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.

Upvotes: 0

ggzone
ggzone

Reputation: 3711

Here a working example - keep in mind this script may not covering all of your requirements but might help you developing what you need: http://jsfiddle.net/xu4qoexq/3/

The correct order for testing is: drag1 = drop1, drag2 = drop2 and so on.

In the drop event we need to attach some information from the draggable item to the droppable area:

$(this).data('item', ui.draggable.data('item'));

Use some data attributes on draggable items and droppable areas and compare them like in the function below:

function compareItems() {
    var result = 'correct';
    $('.drop').each(function (i, e) {
        if ($(this).data('item') !== $(this).data('drop')) {
            result = 'wrong';
        }
    });
    alert(result);
    return false;
}

Upvotes: 1

Related Questions