isotope/masonry 使用jQuery.sortable

 1        function goMasonry() {

 2                // if ($container.data('masonry') != undefined) {

 3                     $container.isotope('destroy');

 4                 }

 5                 $container.isotope({

 6                     itemSelector: '.element',

 7                     // transformsEnabled: false,

 8                     animationEngine: 'jquery',

 9                     animationOptions: {

10                         duration: 750,

11                         easing: 'swing',

12                         queue: true

13                     },

14                     masonry: {

15                         columnWidth: columnWidthT,

16                         gutterWidth: gutterWidthT,

17                         cornerStampSelector: '.corner-stamp'

18                     }

19                 }, myCallBack);

20             }

isotope方法

 1             $('#container').sortable({

 2                 placeholder: {

 3                     element: function (currentItem) {

 4                         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];

 5                     },

 6                     update: function (container, p) {

 7                         return;

 8                     }

 9                 },

10                 tolerance: function (currentItem) {

11                     return 'pointer';

12                 },

13                 items: 'li',

14                 opacity: 0.6,

15                  

16                 helper: function (event, element) {

17                     var clone = $(element).clone();

18                     clone.removeClass('isotope-item');

19                     clone.removeClass('element');

20                     element.removeClass('isotope-item');

21                     element.removeClass('element');

22                     return clone;

23                 },

24                 stop: function (event, ui) {

25                     ui.item.addClass("isotope-item");

26                     ui.item.addClass("element");

27                     goMasonry();

28 

29                 },

30                 change: function () {

31                    

32                 },

33                 sort: function () {

34                     goMasonry();

35                    

36                 }

37             });

sortable方法

1 <ul  id="container">

2      <li class="thumb  element"></li>

3      <li class="thumb  element"></li>

4      <li class="thumb  element"></li>

5      <li class="thumb  element"></li>

6 </ul>

7            

Html 格式

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

http://masonry.desandro.com/

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

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