Hi! I'm doing a drag & drop, in this case they send me a question and 4 answer options, the user has to drag the correct answer into a box, then the question change and a new 4 answers appears. But i cant' "reset" the position of my draggable elements for the next question.
Please help me =)
i'm using this code :
yepnope(
{
nope:[
'js/jquery-ui-1.9.2.custom.min.js',
'js/jquery.ui.touch-punch.min.js',
'css/jquery-ui-1.9.2.custom.min.css'
],
complete: init
}
);
function init() {
var stage = sym.$("Stage");
var Rect1 = sym.$("Rect1");
var Rect2 = sym.$("Rect2");
var Rect3 = sym.$("Rect3");
var Rect4 = sym.$("Rect4");
Rect1.html("1");
Rect2.html("2");
Rect3.html("3");
Rect4.html("4");
Rect1.css("text-align", "center");
Rect2.css("text-align", "center");
Rect3.css("text-align", "center");
Rect4.css("text-align", "center");
Rect1.draggable({ containment: stage});
Rect2.draggable({ containment: stage });
Rect3.draggable({ containment: stage });
Rect4.draggable({ containment: stage });
Rect1.draggable( "option", "revert", "invalid");// If the user doesn't drag the correct answer, it return's to original position, but if he answer right, the draggable have to snap to the box.
Rect2.draggable( "option", "revert", "invalid");
Rect3.draggable( "option", "revert", "invalid");
Rect4.draggable( "option", "revert", "invalid");
// droppable box
var dropCase1 = sym.$("dropCase1");
dropCase1.css("position", "absolute");
dropCase1.droppable({
accept: caso, // my var "caso" is changing according the current question. for that i use a switch /case statement.
drop: function(event, ui) {
console.log("bien");
}
});
}