Isotope/masonry using jquery.sortable

1        functionGomasonry () {2                //if ($container. Data (' masonry ')! = undefined) {3$container. Isotope (' Destroy ');4                 }5 $container. Isotope ({6Itemselector: '. Element ',7                     //Transformsenabled:false,8Animationengine: ' jquery ',9 animationoptions: {Tenduration:750, OneEasing: ' Swing ', AQueuetrue -                     }, - Masonry: { the columnwidth:columnwidtht, - gutterwidth:gutterwidtht, -Cornerstampselector: '. Corner-stamp ' -                     } + }, Mycallback); -}

Isotope Method

1$ (' #container '). Sortable ({2 placeholder: {3Elementfunction(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                     },6Updatefunction(container, p) {7                         return;8                     }9                 },TenTolerance:function(CurrentItem) { One                     return' Pointer '; A                 }, -Items: ' Li ', -opacity:0.6, the                   -Helperfunction(event, Element) { -                     varClone =$ (Element). Clone (); -Clone.removeclass (' Isotope-item '); +Clone.removeclass (' element '); -Element.removeclass (' Isotope-item '); +Element.removeclass (' element '); A                     returnclone; at                 }, -Stopfunction(event, UI) { -Ui.item.addClass ("Isotope-item"); -Ui.item.addClass ("element"); - gomasonry (); -  in                 }, -Changefunction () { to                     +                 }, -Sortfunction () { the gomasonry (); *                     $                 }Panax Notoginseng});

Sortable Method

1 <ulID= "Container">2      <Liclass= "thumb element"></Li>3      <Liclass= "thumb element"></Li>4      <Liclass= "thumb element"></Li>5      <Liclass= "thumb element"></Li>6 </ul>7            

Html Format

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

http://masonry.desandro.com/

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

Instances   http://tyler-designs.com/masonry-ui/