SORTABILLY

SEE PACKERY HOWTO - https://github.com/metafizzy/packery/issues/19

by bizamajig

HTML

<script src="http://packery.metafizzy.co/packery.pkgd.js"></script>
<script src="http://draggabilly.desandro.com/draggabilly.pkgd.min.js"></script>
<ul class="draggie-parent">
            <li class="dragmiester draggernaut green"></li>
            <li class="dragmiester draggernaut blue"></li>
            <li class="dragmiester draggernaut yellow"></li>
        </ul>
        <ul id="sortable">
            <li class="draggernaut gold"><span class="draggernaut-handle">1</span></li>
            <li class="draggernaut cyan"><span class="draggernaut-handle">2</span></li>
            <li class="draggernaut chartreuse"><span class="draggernaut-handle">3</span></li>
            <li class="draggernaut gold"><span class="draggernaut-handle">4</span></li>
            <li class="draggernaut cyan"><span class="draggernaut-handle">5</span></li>
            <li class="draggernaut chartreuse"><span class="draggernaut-handle">6</span></li>
        </ul>

CSS

.draggie {
                width: 100px;
                height: 100px;
                background-color: red;
                z-index: 2;
            }
            .transition {
                transition: all 0.5s ease-in-out;
                -webkit-transition: all 0.5s ease-in-out;
            }
            #dragster-parent, .draggie-parent {
                display: inline-block;
            }
            #dropster {
                width: 150px;
                height: 150px;
                margin: 50px 150px 50px;
                background-color: #888;
                position: absolute;
                z-index: 1;
            }
            .dragist, .draggernaut {
                width: 50px;
                height: 50px;
                z-index: 2;
            }
            .draggernaut {
                margin-top: 10px;
            }
            .draggernaut2 {
                
                float: left;
            }
            .test {
                animation: fadein 1s;
                -webkit-animation: fadein 1s;
            }
            .green { background-color: green; }
            .blue { background-color: blue; }
            .yellow { background-color: yellow; }
            .chartreuse { background-color: chartreuse; }
            .cyan { background-color: cyan; }
            .gold { background-color: gold; }
            @keyframes fadein {
                from { opacity:0; }
                to { opacity:1; }
            }
            @-moz-keyframes fadein { /* Firefox */
                from { opacity:0; }
                to { opacity:1; }
            }
            @-webkit-keyframes fadein { /* Safari and Chrome */
                from { opacity:0; }
                to { opacity:1; }
            }
            #sortable {
                width: 50px;
                height: 500px;
                padding: 0px 5px;
                margin: 0px 150px;
                background-color: #888;
                position: absolute;
          ...

JavaScript

// jquery.droppabilly.js
// Version: 0.0.2
// Author: Chien-Hung Chen (github.com/chienhungchen)
// jQuery plugin for creating droppables to use with draggabilly.js
// This is suppose to be a barebones alternative (when coupled with draggabilly.js) to jQuery UI + touchpunch

// TODO: Allow clone should be on by default, allow clone needs to be able to be turned off
// Allow clone will allow '#id-draggabilly-clone'

(function($){
    "use strict";

    var methods = {
        init: function(options) {

            var curDroppabilly = this,
                flags = {
                    wasOver : false,
                    hasDropped : false,
                    hasReleased : true,
                    invokedOverFunc : false,
                    invokedOutFunc : false,
                    invokedDropFunc : false
                },
                draggies = $(options.dragsters);

            function dragMove(mouseEvent, droppabilly, draggabilly, flags) {
                //event: over
                if(methods.overlap(droppabilly, draggabilly)) {
                    flags.wasOver = true;
                    flags.invokedOutFunc = false;
                    if(!flags.hasDropped && !flags.invokedOverFunc) {
                        if(options.over(droppabilly, draggabilly)) {
                            flags.invokedOverFunc = true;
                        }
                    }
                }
                //event: out
                else if(flags.wasOver && !flags.hasReleased) {
                    if(!flags.invokedOutFunc) {
                        if(options.out(droppabilly, draggabilly)) {
                            flags.invokedOutFunc = true;
                        }
                    }
                    flags.invokedOverFunc = false;
                }
            }

            function dragEnd(mouseEvent, droppabilly, draggabilly, flags) {
                //event: drop on drop zone
                if(methods.overlap(droppabilly, draggabilly)) {
...