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);
             }

isotope方法

             $('#container').sortable({
                 placeholder: {
                     element: function (currentItem) {
                         return $("<li class='thumb element isotope-item rqq' style='margin: 1px; height: " + (currentItem.height() - 4) + "px; width: " + (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();
 
                 }
             });

sortable方法

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

Html 格式

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

http://masonry.desandro.com/

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

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