Question

This is a bit of a weird desire but I am making a matching game using jQuery UI, and I want to allow a user to drag an element from one <ul> of jQuery draggables (list A) and then drop it in a jQuery droppable (list B). After the user has decided that they think every item from list A is in the correct place in list B, they can click a button to check their answers.

This is where it gets tricky. After clicking to check answers, the correct items are made green and locked in place, and the incorrect items are just left there in their incorrect droppables. Does anyone have any good ideas for how I could return the incorrect items back to list A?

I can post up the code but I’m not really sure it’s necessary, I just need ideas and/or mock implementations.

Thanks!

**

EDIT:

So thanks to Ken this is what I’m doing… When the item is dropped it jQuery adds certain css properties to it; position:relative, top, and left are changed so that the item will remain fixed in its accepted drop location. In order to revert these I just did the following (after adding correctLoc to the correctly dropped items):

$('li:not(.correctLoc)').animate({top: 0, left: 0});

Thanks Ken!

**

Answer 1

When you check for correctness and make some items green, presumably you’re adding a class to those items. So to reset incorrect items, maybe something like this:

$('#listB')
    .find('li:not(.correct)')  // select wrong items
    .appendTo('#listA');       // insert into list A