hammerjs drag and drop

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://rawgit.com/EightMedia/hammer.js/1.1.3/hammer.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

<div draggable="true" class="box">
  This text <strong>may</strong> be dragged.
</div>
  
  <div class="box drag-target">target</div>
  <script src="script.js"></script>

</body>
</html>

Hammer($('.box').get(0)).on('dragstart', function(event) {
  console.log('dragstart', event);
});

Hammer($('.box').get(0)).on('drag', function(event){
  // console.log('drag', event.gesture.deltaX, event.gesture.deltaY)
  var target = event.target;
  $(target).css({
    'transform': 'translate(' + event.gesture.deltaX + 'px,' + event.gesture.deltaY + 'px)'
  });
});

Hammer(document.body).on('release', function(event){
  console.log('release', event);
  event.gesture.preventDefault()
});

Hammer(document.body).on('dragend', function(event) {
  console.log('dragend', event);
  
  $(event.target).css({'transform': 'translate(0,0)'});
  // debugger;
  var dropEl = document.elementFromPoint(event.gesture.center.pageX, event.gesture.center.pageY);
  console.log('dropped on', dropEl);
  if ($(dropEl).hasClass('drop-target')) {
    console.log('dropped on drop target');
  }
})
$(document.body).on('mousedown', '[draggable]', function(event){

  console.log('mousedown', event);
})
$(document.body).on('mouseup', '[draggable]', function(event){
  
  console.log('mouseup', event);
  event.preventDefault()
})

.box {
      padding: 5px;
      background: red;
      margin: 10px;
  position:relative;
  z-index: 3;
}
.drag-target {
  background: blue;
  z-index: 1;
}
.drag-target-box {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z