Shapeshift Mosaic

by Axelvaisper

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.shapeshift/2.0.0/jquery.shapeshift.min.js"></script>
<div class="container">
    <div id="block1"></div>
    <div id="block2"></div>
    <div id="block3" data-ss-colspan='2'></div>
    <div id="block4"></div>
    <div id="block9"></div>
    <div id="block7" data-ss-colspan='2'></div>
    <div id="block5" class="red"></div>
    <div id="block6"></div>
    <div id="block8"></div>    
</div>

CSS

.container {
    border: 1px dashed #ccc;
    position: relative;
    width: 95%;
}

.red{background:rgba(255, 0, 0, 0.52)!important}

.container > div {
    background: #CCC;
    border: 2px solid rgba(0,0,0,.2);
    border-radius:.7em;
    height: 100px;
    position: absolute;
    width: 80px;
}

.container > div[data-ss-colspan='2'] { width: 150px; }

.container .ss-placeholder-child {
    background: transparent;
    border: 1px dashed red;
}

JavaScript

$(function () {

var index;
$(".container").shapeshift()
.on('ss-rearranged', function(e, box) {
index = $(box).index();
})
.on('ss-drop-complete', function(e) {
var last = $(e.target).children().eq(index);
console.log(last.position());
})




});