Draggabilly - Packery - element inside not clickable - 2 - BIZAMAJIG USAGE

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

by bizamajig

HTML

<script src="http://draggabilly.desandro.com/draggabilly.pkgd.js"></script>
<script src="http://packery.metafizzy.co/packery.pkgd.js"></script>
<div id="container" class="packery">
  <div class="item w4 h4">
      <div class="handle"></div>
      Try to open this dropdown: <br/>
      <select>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
      </select>      
      <br/>      
      <a href="http://stackoverflow.com" target="_blank">Hyperlink is clickable</a>      
  </div>
  <div class="item w4 h4"><div class="handle"></div></div>
</div>

CSS

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

.packery .item {
  color: white;
  width:  40px;
  height: 40px;
  float: left;
  background: #C09;
  border: 4px solid #333;
  border-color: hsla(0, 0%, 0%, 0.3);
  margin: 0;
}

.packery .item.w2 { width:   80px; background: #9C0; }
.packery .item.h2 { height:  80px; background: #0C9; }
.packery .item.h4 { height: 160px; background: #C90; }
.packery .item.w4 { width:  160px; background: #90C; }

.packery .item.is-positioning-post-drag,
.packery .item.is-dragging {
  background: #09F;
  z-index: 2;
  border-color: yellow;
}

/* keep most stuff on top */
.item > * {
    position: relative;
    z-index: 2;
}

.item .handle {
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

a { 
    color: white 
}

JavaScript

var $container = $('#container')[0]; // get[0] for Draggabilly - Packery

  var pckry = new Packery( $container, {
//    columnWidth: 80,
//    rowHeight: 80
  });

  var itemElems = pckry.getItemElements();
  // make items draggable
  for ( var i=0, len = itemElems.length; i < len; i++ ) {
    var elem = itemElems[i];
    var draggie = new Draggabilly( elem, {
        handle: '.handle'
      });
      pckry.bindDraggabillyEvents( draggie);
  }