Draggabilly - Packery - element inside not clickable - BIZAMAJIG USAGE

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

$(function(){
                function onDragMove( instance, event, pointer,$dragParent ) {
                }
                function onDragStart( instance, event, pointer ,$dragParent) {
                    $(instance.element).removeClass('transition').removeClass('test');
                }
                function onDragEnd( instance, event, pointer ,$dragParent) {
                    var $drag = $(instance.element);
                    if(droppedSuccess) {
                        if($drag.hasClass('green')) $drag.removeClass('chartreuse');
                        else if($drag.hasClass('blue')) $drag.removeClass('cyan');
                        else if($drag.hasClass('yellow')) $drag.removeClass('gold');
                        $drag.css({
                            left: '0px',
                            top: '0px'
                        }).addClass('test');
                        droppedSuccess = false;
                    }
                    else {
                        //$(instance.element).animate({left: '0px', top: '0px'});
                        $(instance.element).addClass('transition').css({
                            transform: 'translate3d(' + -instance.position.x + 'px, ' + -instance.position.y + 'px, 0)',
                            '-webkit-transform': 'translate3d(' + -instance.position.x + 'px, ' + -instance.position.y + 'px, 0)'
                        });
                    }
                }
                //var draggie = new Draggabilly($("#dragster")[0]);
                //var $dragParent = $(draggie.element).parent();
                var droppedSuccess = false;
                var toDuration = 500;
                var dragists = [];
                $('.dragmiester').each(function(){
                    var draggie = new Draggabilly(this);
                    var $dragParent = $(draggie.element).parent();
                    draggie.on('dragMove', function(instance, event, pointer) { 
                       ...