JointJS ondrop event

HTML

<script src="https://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.2.3/backbone-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jointjs/2.1.3/joint.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/2.1.3/joint.min.css">
<div class="component component1" draggable="true" ondragstart="event.dataTransfer.setData('type', 'standard.Rectangle')">Component1</div>

<div class="component component2" draggable="true" ondragstart="event.dataTransfer.setData('type', 'standard.Circle')">Component2</div>

<div id="paper" />

CSS

#paper {
  border: 1px solid gray;
  /*float: left;*/
  position: relative;
  width: 500px;
  height: 300px;
  /*overflow: hidden;*/
}

.component {
  width: 100px;
  height: 100px;
  display: inline-block;
}

.component1 {
  background: red;
}

.component2 {
  background: blue;
}

JavaScript

var graph = new joint.dia.Graph();
var paper = new joint.dia.Paper({
  el: document.getElementById('paper'),
  width: 500,
  height: 300,
  model: graph
});

paper.el.addEventListener('drop', function(evt) {
  var elementJSON = {
    type: evt.dataTransfer.getData('type'),
    size: {
      width: 100,
      height: 100
    },
    position: paper.clientToLocalPoint(evt.clientX - 50, evt.clientY - 50).toJSON()
  };
  graph.addCell(elementJSON);
}, false);

// necessary for the drop event to trigger
paper.el.addEventListener('dragover', function(evt) {
  evt.preventDefault();
}, false);