Drag and Drop with Validation

Drag and Drop with Validation using jQuery UI

by vincentieo

HTML

<div class="questions">
        <div class="dragAble" name="quest" id="a">
            <p>a</p>
        </div>
        <div class="dragAble" name="quest" id="b">
            <p>b</p>
        </div>
        <div class="dragAble" name="quest" id="c">
            <p>c</p>
        </div>
    </div>
       
    </div><!-- end questions -->
    
    <br />
    
    <div class="answers">
        <div class="dropAble" name="answ" id="1">
            <p>1</p>
        </div>
        <div class="dropAble" name="answ" id="2">
            <p>2</p>
        </div>
        <div class="dropAble" name="answ" id="3">
            <p>3</p>
        </div>

    </div><!-- end answers -->
    
    <div id="win">
        Correct
    </div>
    <div class="result" id="fail">
        Nope, try again!
    </div>
    
<button id="submit">Check</button>

CSS

#win,#fail
{
    display:none;
}

.dragAble {
    width: 160px; height: 37px;
    border: 1px solid #888888;
    background: #f0f0f0;
    margin: 10px 0;
}

.dragAble p, .dropAble p {
    font-size: 15px;
    text-align: center;
    margin-top: 9px;
}

.dragAble p:hover, .dropAble p:hover {
    cursor: default;
}

.dropAble {
    width: 160px; height: 37px;
    border: 1px dashed #888888;
    margin: 10px 0;
}

JavaScript

var correctAnswers = ['a-1', 'b-2', 'c-3'];
var results = [];

$('.dragAble').draggable({
    containment: "#content",
    cursor: "move",
    snap: ".dropAble",
});

$( ".dropAble" ).droppable({
    drop: function( event, ui ) {
        results.push($(ui.draggable).attr("id") + '-' + $(this).attr("id"));
    }
});

$("#submit").click(function(){
    console.log(results);
    result = true;
    $.each(results, function(index, value){
        if($.inArray(value, correctAnswers ) == -1){
            result = false;
        }
        
        if(!result) return;
    });
    
    //Time out message
    function fadeMessage(){
        $('#win').hide();
        $('#fail').hide();
     }; 
    
    
    
    if (result) {
        $("#win").show( setTimeout(fadeMessage, 600) );
    } else {
        $("#fail").show( setTimeout(fadeMessage, 600) );
    };
});