JSFiddle - React, Tailwind, and code Playground

by axelmichel

HTML

<table border=3>
    <tr><td id="pos1">1<div id="p11"></div></td><td id="pos2">2</td><td id="pos3">3</td></tr>
    <tr><td id="pos4">4</td><td id="pos5">5</td><td id="pos6">6</td></tr>
    <tr><td id="pos7">7</td><td id="pos8">8</td><td id="pos9">9</td></tr>
    <tr><td id="pos10">10</td><td id="pos11">11</td><td id="pos12">12</td></tr>
</table>


<button id="move">Move</button>

CSS

#p11{
    height:10px;
    width:10px;
    background:red;
}
td{
    height:30px;
    width:30px;
}

JavaScript

/*
I would like to move the #p11 from pos1 to pos11 in direction 4,7,8,11
*/

$("#move").bind("click",animate);

var direction=[4,7,8,11]
function animate(){
        moveAnimate("#p11",0);
}


 function moveAnimate(element, count){
      console.log(count);
     if(count >= direction.length) {return; }
        newParent = '#pos' + direction[count];
        element = $(element); //Allow passing in either a JQuery object or selector
        newParent= $(newParent); //Allow passing in either a JQuery object or selector
        var oldOffset = element.offset();
        element.appendTo(newParent);
        var newOffset = element.offset();

        var temp = element.clone().appendTo('body');
        temp    .css('position', 'absolute')
                .css('left', oldOffset.left)
                .css('top', oldOffset.top)
                .css('zIndex', 1000);
        element.hide();
        temp.animate( {'top': newOffset.top, 'left':newOffset.left}, 'slow', function(){
           element.show();
           temp.remove();
           count++;
           moveAnimate(element,count);
        });
    }