Help with this code.

Question

Hey guys i need help with this code.The short version is,i have to do match the follwing by using drag and drop in jquery and later i need to show a message whether it is right or wrong.

---

var output = "Wrong";
var old_item;
var new_item;
var newObjArray = [];

$(function () {

    var $gallery = $('.gallery'),
        $trash = $('.trash');

    $('div', $gallery).draggable({
        revert: 'invalid',
        containment: 'document',
        helper: 'clone',
        cursor: 'move',
    });

    // let the trash be droppable, accepting the gallery items
    $trash.droppable({
        //accept: '#gallery div',
        //activeClass: 'ui-state-highlight',
        tolerance: 'touch',
        drop: function (ev, ui) {
            new_item = ui.draggable;
            $(this).droppable("option", "activeClass", '.ui-state-highlight');

            if (contains(newObjArray, ui.draggable)) {
                newObjArray.pop(ui.draggable);
            }
            newObjArray.push(ui.draggable);
            deleteImage(ui.draggable, $(this));
        }
    });


    // let the gallery be droppable as well, accepting items from the trash
    $gallery.droppable({
        //accept: '#trash li',
        activeClass: 'custom-state-active',
        drop: function (ev, ui) {
            recycleImage(ui.draggable);

        }
    });

    // image deletion function

    function deleteImage($item, element) {
        var $list;
        $item.fadeOut(10, function () {
            if ($(".ui-widget-content", element).length < 1) {
                old_item = $item;
                $list = $('<div class="gallery ui-helper-reset"/>').appendTo(element);

                //$('ul',$trash).length ? $('ul',$trash) : $('<ul class="gallery ui-helper-reset"/>').appendTo($trash);                         
                $item.appendTo($list).fadeIn(10);

            }
            else {

                recycleImage($(".ui-widget-content", element));

                $list = $('<div class="gallery ui-helper-reset"/>').appendTo(element);
                $item.appendTo($list).fadeIn(10);
                old_item = $item;
            }
        });
    }

    //check for given answer
    // image recycle function


    function recycleImage($item) {
        $item.fadeOut(10, function () {
            $item.find("img").end().appendTo($gallery).fadeIn(10);
        });
    }

    // image preview function, demonstrating the ui.dialog used as a modal window
});

---

function checkOrder() {
    if (newObjArray == null) {

    } else if (newObjArray != null) {


        if (newObjArray[0].attr("id") == "5" && newObjArray[1].attr("id") == "1" && newObjArray[2].attr("id") == "3" && newObjArray[3].attr("id") == "2" && newObjArray[4].attr("id") == "4") {

            parent.parent.increaseCorrectA();
        }
        else {
            parent.parent.increaseWrongA();
        }
    }
}

function contains(a, obj) {
    var i = a.length;
    while (i--) {
        if (a[i] === obj) {
            return true;
        }
    }
    return false;
}

---

I am calling the function checkOrder() from the html page after the matching of items is over.What happens here is i have just stored the user responses on the draggable over droppable in an array,based on it's position.It is a bad practice cause,i am saying whether it's right or wrong through its position in the array.The only thing i can do is get the draggable's id present in the droppable.But i dont know how to get that inside the function checkOrder().Any ideas please?

Answer 1

use jqueryui's sortable: http://jqueryui.com/demos/sortable/