jquery Uncaught TypeError: Cannot read property 'options' of undefined (edited)

Question

I made a function for a simple drag and drop quiz. Everything works fine except for Internet Explorer of course. In the Chrome console I get this error:

Uncaught TypeError: Cannot read property 'options' of undefined

when I drop a draggable on a droppable. I "think" (See edit below) I know that the error occurs because I return "false" when the answer is right, while false isn't a legal return statement for revert.

I want the draggable div to stay on the given position and not be draggable any more, and so it won't return to its start position. I tried returning nothing, returning "valid", returning "invalid" and returning true. But everything except returning nothing, returns the div to its start position.

Returning nothing gives the same error as above. My question is what do I have to return without getting the error in Chrome? Or do I need to change my function?

This is the function

function dragAndDrop() {
    //drag and drop
    $('.drag').draggable({ revert: 'invalid'}); //returns this to start position when drag stops and not dropped on droppable element
    $('.answer').droppable({ 
        drop: function(event, ui) {
            var target = $(this);
            var targetId = target.attr('id');
            ui.draggable.draggable('option', 'revert', function() {
                var dragId = $(this).attr('id');
                if(dragId == targetId) {
                    //right answer
                    $(this) 
                        .offset({ top: target.offset().top, left: target.offset().left })
                        .draggable('destroy');
                    var img = $(this).find('img');
                    console.log(img);
                    $('.imageCol2 > div').each(function() {
                        if($(this).attr('id') == dragId) {
                            img
                                .css({ position: 'relative' })
                                .animate({"left": "-=px"}, "slow"); 
                                console.log($(this));
                        }
                    });
                    //score counter
                    $('span#correct').each(function(index, elem) {                      
                        var good = parseInt($(this).text()) + 1;
                        $(this).text( function(i,txt) {return txt.replace(/\d+/, good); });
                    });
                    return false;
                }
                else {
                    //wrong answer
                    //score counter
                    $('span#incorrect').each(function() {
                        var fault = parseInt($(this).text()) + 1;
                        $(this).text( function(i,txt) {return txt.replace(/\d+/, fault); });
                    });
                    return true;
                }
            });
        }
    });
}

Note that the error only occurs when the answer is right.

EDIT:

I thought that the error occurred because of the wrong return statement. But I have changed my function to the one below. I still get the same error when the answer is right.

    function dragAndDrop() {
    //drag and drop
    $('.drag').draggable({ revert: 'invalid'}); //returns this to start position when drag stops and not dropped on droppable element
    $('.answer').droppable({ 
        drop: function(event, ui) {
            var target = $(this),
                targetId = target.attr('id'),
                drag = $(ui.draggable), 
                dragId = drag.attr('id');
            if(dragId == targetId) {
                //right answer
                //score counter
                $('span#correct').each(function() {                     
                    var good = parseInt($(this).text()) + 1;
                    $(this).text( function(i,txt) {return txt.replace(/\d+/, good); });
                });
                drag
                    .offset({ top: target.offset().top, left: target.offset().left })
                    .draggable('destroy');
                var img = drag.find('img'); 
                $('.imageCol2 > div').each(function() {
                    if($(this).attr('id') == dragId) {
                        img
                            .css({ position: 'relative' })
                            .animate({"left": "-=px"}, "slow"); 
                    }
                });
            }
            else {
                //wrong answer
                //score counter
                $('span#incorrect').each(function() {
                    var fault = parseInt($(this).text()) + 1;
                    $(this).text( function(i,txt) {return txt.replace(/\d+/, fault); });
                });
                drag.draggable('option', 'revert', true);
            }
        }
    });
}

I think I have to change my question to "What I'm doing wrong?".

Answer 1

I have found the answer to my question.

I changed .('destroy') into .('disable'). This solved the problem that the error occurred.