mercredi 24 décembre 2014

enabling draggable on new class jquery


I have two arrays of items. One is images and the other words. These form a drag and drop activity for students. Images dragged to words have classes assigned as .right or .wrong depending on whether they are accurate or not. Students get one drop per image and so both classes become undraggable when dropped thus:



function handleCardDrop( event, ui ) {
slotNumber = $(this).data( 'number' );
cardNumber = ui.draggable.data( 'number' );
ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
if (slotNumber == cardNumber) {
ui.draggable.removeClass('wrong');
ui.draggable.addClass('right');
$('.right').draggable('disable');
correctCards++;
} else {
ui.draggable.addClass('wrong');
$('.wrong').draggable('disable');
};
}


Students can check their work at any point via a button. When this is clicked, I run a checker function thus:



function checker() {
if ( correctCards == howManyItems ) {
$('#successMessage').show();
$('#successMessage').animate( {
left: '380px',
top: '200px',
width: '400px',
height: '100px',
opacity: 1
} );
} else {
alert("Nice try, but not quite. You have " + correctCards + " correct.");
$(".picpos").data("left", $(".picpos").position().left).data("top", $(".picpos").position().top);
$(".wrong").animate({
"left": $(".picpos").data("left"),
"top": $(".picpos").data("top")
});
};
$('#pic').removeClass('wrong').addClass('redo');
$('.redo').draggable({disabled: true});
$('.redo').draggable('enable');
};


Answers classed as .wrong are reverted to their start position and then have their class changed to .redo.


The issue I'm having is that draggable doesn't seem to actually apply to .redo and I've tried several different ways of getting it to apply. Thus, when the images now animate back to their starting positions, they cannot be dragged.


I'll also add that it's necessary to change the class from .wrong when the images return. If they retain that class, as soon as a student makes one wrong drop on their second attempt, any images that have been wrong before are rendered undraggable by the handleCardDrop function because it disables .wrong class images.





Aucun commentaire:

Enregistrer un commentaire