Masonry / sortable combo demo

Re https://github.com/desandro/masonry/issues/45#issuecomment-3589546

by DigitalBiscuits

HTML

<script src="http://dl.dropbox.com/u/1000295/jquery.masonry.min.js"></script>
<ul id="masonry">
    <li class="layout-card bigun"></li>
        
    <li class="layout-card">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li class="layout-card">
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li class="layout-card">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li class="layout-card">
        <ul>
            <li></li>
        </ul>
    </li>
    <li class="layout-card">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li class="layout-card">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li class="layout-card">
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li class="layout-card">
        <ul>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li class="layout-card">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
    <li class="layout-card">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </li>
</ul>

CSS

#masonry {
       
}

#masonry > li {
    width: 140px;
    display:block;
    background: #555;
    margin: 5px;
}

#masonry > li.bigun {
  width: 290px;
  height: 50px;
  background: #159;
}

#masonry > li li {
    display:block;
    height:20px;
}

.card-sortable-placeholder {
    background: #aaa !important;
}

.dragging { opacity: .8; background: #ff6903 !important; }

JavaScript

$(document).ready( function () 
{
    var t = $('#masonry');
    
    t.masonry({
        itemSelector:        '.layout-card',
        isResizable:        true,
        columnWidth: 150
    })
    
    t.sortable({
        distance: 12,
        forcePlaceholderSize: true,
        items: '.layout-card',
        placeholder: 'card-sortable-placeholder layout-card',
        tolerance: 'pointer',
        
        start:  function(event, ui) {            
                 console.log(ui); 
            ui.item.addClass('dragging').removeClass('layout-card');
            if ( ui.item.hasClass('bigun') ) {
                 ui.placeholder.addClass('bigun');
                 }
                   ui.item.parent().masonry('reload')
                },
        change: function(event, ui) {
                   ui.item.parent().masonry('reload');
                },
        stop:   function(event, ui) { 
                   ui.item.removeClass('dragging').addClass('layout-card');
                   ui.item.parent().masonry('reload');
        }
   });
})