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?
