Using Animate() jquery to animate the place change in a puzzle

Question

https://fiddle.jshell.net/sLa0q4yh/

This example above is not yet fully functional, the logic of the puzzle is:

1 - Click on at least two Ivs (or 2 pieces of the puzzle) and so both Ivs would have to switch places using animation.

2 - For this to occur, I collected with the offset of jquery, the top and left position, both of the first and second piece of the puzzle clicked.

3 - But when using the Animate() (to make the animation of the swap of parts) nothing is happening, they remain in the same place.

What can be done in this case?

Grateful

Answer 1

For your code to work, yours .pecas have to be positioned in absolute from the beginning, otherwise when you change the position of the relative for absolute he ... does strange things, as you see.

$(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 has worked. Basically, what this function is doing is absolutely positioning the elements by lines. Note that I changed the css of the .pecas to be position: absolute at first.

Answer 2

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 basis (position:relative) and the parts (position:Bsolute).

So I created the block css class with position relative and z-index 2 so that when the client clicks it is selecting the base and not the part.

The class piece passed to position Absolute and z-index 1 to reinforce that lies below the base.

With this change, there was a need to place the pieces on the board. The start function has been created.

The alloy function was created to mark the part to the base number.

The gait function has been created to move the piece with the desired effect.

Example.: https://jsfiddle.net/sLa0q4yh/5/