Drag & Drops that can be checked

[mikewax]

Hello,

I am a little bit new to JavaSctipt and JQuery, so please bear with me.

I have setup a Drag & Drop with JQuery, and it is for a quiz. I have added 2 “Drop Points” that indicate where the correct drop location in. Currently, I just set it up so that when an item is dragged and dropped onto target 1, it gies an alert “Dropped”, target 2 says “Dropped Again!”

I have 4 different draggables, all with separate IDs. I would like to make it so that when a certain ID is dropped onto a target, it can mark as correct, like highlight the drop point green, and if it’s the wrong ID, it highlights red.

I read somewhere that the best thing to do is setup my JQuery (where I have the drop point alerts), to say when ID 1 is dropped here, create a variable titled “Correct”, otherwise create a variable titled “Incorrect”. There was no example, so I’m not sure how to code that in JQuery.

Here is the JQuery I have thus far:

        $( "#dropPoint1" )
        .droppable({
            hoverClass : 'droppableStyle',
            drop: function( event, ui ) {
                alert('Dropped!');
            }
        }); 

Any help is greatly appreciated. Thank you so much!

• Mike

[mikewax]

That makes a lot of sense when you mention that $(this) is the drop point. This will work just perfectly. Thank you for this, it has been a big help!

[Author]

Posts