Help with this code.

Posted by karthick6891 on Stack Overflow See other posts from Stack Overflow or by karthick6891
Published on 2010-06-14T10:45:45Z Indexed on 2010/06/14 10:52 UTC
Read the original article Hit count: 339

Filed under:
|

Heading ##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?

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about jQuery