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;  " + (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/