JSFiddle - React, Tailwind, and code Playground

by Santosh Thakur

HTML

<h1>Offset Animation</h1>

<div id="div1">
    <div class="col"><span>a</span>

    </div>
    <div class="col"><span>b</span>

    </div>
    <div class="col"><span>c</span>

    </div>
    <div class="col"><span>d</span>

    </div>
</div>
<div id="div2"></div>

CSS

#div1 {
    border:1px solid #333;
    position:relative;
    left:0;
    width:450px;
    height:200px;
}
.col {
    width:100px;
    margin:3px;
    height:100px;
    background-color:#ffc;
    float:left;
    cursor:pointer;
}
#div2 {
    border:1px solid #333;
    position:relative;
    right:0;
    width:450px;
    height:200px;
}
.ghost {
    border:1px solid red;
    padding:5px;
    position:absolute;
    top:10px;
    left:10px;
}

JavaScript

(function () {
    
    var $flower = $('#div1');
    $flower.find('.col').on('click', function (e) {
        
        //e.preventDefault();
        var $link = $(this),
            $img = $link.find('span');
       
        $ghost = $img.clone().appendTo($link).addClass('ghost');

        var imgCoords = $img.offset(),
            $target = $('#div2'),
            targetCoords = $target.offset();
       alert(imgCoords.left)
        $ghost.animate({
            'left': targetCoords.left - imgCoords.left,
                'top': targetCoords.top - imgCoords.top
        });
    });


})();