JSFiddle - React, Tailwind, and code Playground

by Oski Krawczyk

HTML

click to remove
<ul id="cont">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

CSS

ul {
    height: 500px;
    border: solid 1px red;
}

li {
    border: solid 1px green;
    height: 120px;
    width: 120px;
    float: left;
    margin: 5px;
}

.clone {
}

JavaScript

var cont = document.id('cont'),
    els = document.getElements('li'),
    elsPos = [],
    clone = [];

els.each(function(el) {
    el.addEvents({
        click: function() {
            elsPos = els.getCoordinates();

            els = document.getElements('li').each(function(el, index) {
                el.set('styles', {
                    position: 'absolute',
                    top: elsPos[index].top - 5,
                    left: elsPos[index].left - 5
                });
               clone[index] = Element('li', {
                    'class': 'clone'
                }).inject(cont);
            });
            this.destroy();
            els = document.getElements('li');
            clone.each(function(clone, index) {
                var t = els[index];
                if (t) {
                    t.morph({
                        left: clone.getCoordinates().left - 5,
                        top: clone.getCoordinates().top - 5
                    });
                }

            });

            document.getElements('.clone').destroy();
        }
    });
});