isotope/masonry 使用jQuery.sortable

       function goMasonry() {
               // if ($container.data('masonry') != undefined) {
                    $container.isotope('destroy');
                }
                $container.isotope({
                    itemSelector: '.element',
                    // transformsEnabled: false,
                    animationEngine: 'jquery',
                    animationOptions: {
                        duration: 750,
                        easing: 'swing',
                        queue: true
                    },
                    masonry: {
                        columnWidth: columnWidthT,
                        gutterWidth: gutterWidthT,
                        cornerStampSelector: '.corner-stamp'
                    }
                }, myCallBack);
            }

            $('#container').sortable({
                placeholder: {
                    element: function (currentItem) {
                        return $("<li class='thumb element isotope-item rqq' style='margin: 1px; height: " + (currentItem.height() - 4) + "px;  " + (currentItem.width() - 4) + "px; vertical-align: middle; text-align: center; outline: none; border: 1px dashed black; background-color: #97dd52;'></li>")[0];
                    },
                    update: function (container, p) {
                        return;
                    }
                },
                tolerance: function (currentItem) {
                    return 'pointer';
                },
                items: 'li',
                opacity: 0.6,
                 
                helper: function (event, element) {
                    var clone = $(element).clone();
                    clone.removeClass('isotope-item');
                    clone.removeClass('element');
                    element.removeClass('isotope-item');
                    element.removeClass('element');
                    return clone;
                },
                stop: function (event, ui) {
                    ui.item.addClass("isotope-item");
                    ui.item.addClass("element");
                    goMasonry();

                },
                change: function () {
                   
                },
                sort: function () {
                    goMasonry();
                   
                }
            });

<ul  id="container">
     <li class="thumb  element"></li>
     <li class="thumb  element"></li>
     <li class="thumb  element"></li>
     <li class="thumb  element"></li>
</ul>
           

http://api.jqueryui.com/sortable/

http://masonry.desandro.com/

http://isotope.metafizzy.co/docs/introduction.html

实例  http://tyler-designs.com/masonry-ui/