Question

Hi im trying to make a darg and drop question.

I want top use this ++ code:
http://jsfiddle.net/donejs/3NkZM/light/

i want the box to turn green for correct and red for incorrect.

Ie i am drag would be correct
and drag me to to be incorrect

i have tried a few different methods such as:

    $('.drag').on('draginit', function(ev, drag) {
        // Create a ghost for this drag
        drag.ghost();
    });

    $('.drop').on({

        'dropover' : function(ev, drop, drag) {
            $(this).addClass('highlight');
        },
        'dropout' : function(ev, drop, drag) {
            $(this).removeClass('highlight');
        },
        'dropon' : function(ev, drop, drag) {
            if('#correct') {
                $(this).addClass('green')   
            }
            else {
                $(this).addClass('red') 
            };
        };
});

can anyone point me in the right direction ?

Answer 1

HTML: (you have to say which one is correct)

<div class="drag correct">
    I am a drag
</div>

<div class="drag">
    Drag me, too
</div>

<div class="drop">
    Drop zone
</div>

JS: (you have to check if the dropped element is “.correct” and, if true, add a “correct” class to the dropzone)

$('.drag').on('draginit', function(ev, drag) {
    // Create a ghost for this drag
    drag.ghost();
});

$('.drop').on({
    'dropover' : function(ev, drop, drag) {
        $(this).addClass('highlight');
    },
    'dropout' : function(ev, drop, drag) {
        $(this).removeClass('highlight');
    },
    'dropon' : function(ev, drop, drag) {
        $(this).html('Dropped: ' + drag.element.html());
        $(this).removeClass('highlight');

        $(this).addClass('dropped');
        if($(drag.element).is('.correct')) {
            $(this).addClass('correct');
        } else {
            $(this).removeClass('correct');
        }
    }
});

Add to CSS (color the dropzone):
​

.dropped {
    background-color: red;
}

.dropped.correct {
    background-color: green;
}
​

DEMO: http://jsfiddle.net/3NkZM/273/