This example above is not yet fully functional, the puzzle logic is:
1 - Click on at least two divs (or 2 pieces of the puzzle) and so the two divs would have to move places using animation.
2 - For this to happen, I collected the jquery offset, the top and left positions of both the first and second pieces of the clicked puzzle.
3 - But when you use animate () (to animate the parts exchange) nothing is happening, they are still in the same place.
What can be done in this case?
Thankful
I think it's best to think like objects. Example a puzzle needs to have a base and pieces.
Following the logic we need to make the base (position: relative) and the pieces (position: absolute).
So I created the class of css block with position relative and with z-index 2 so when the client clicks to select the base and not the part.
The class piece has moved to absolute position and z-index 1 to reinforce it underneath the base.
With this change, there was a need to put the pieces on the board. The start function was created.
The alloy function was created to mark the part to the base number.
The walk function was created to move the part with the desired effect.
Example: link
For your code to work, your .pecas must be positioned in absolute from the beginning, otherwise when you change the position of the element from relative to absolute it ... does strange things, how are you watching?
$(function(){
var top = 10, left = 0;
var piecesPerLine = 4;
$('.pecas').each(function(key, ele) {
key += 1;
piecesPerLine--;
$('.parte-'+key).css({left:left,top: top});
left += 156;
if (piecesPerLine === 0) {
left = 0;
top += 80;
piecesPerLine = 4;
}
});
});
If you add this to the beginning of your script, the script that runs .
Basically, what this function is doing is to position the elements absolutely by lines. it is worth noting that I changed the css of .pecas to be position: absolute onset.