JointJS ondrop event

With Custom Paper

by Roman Bruckner

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

const graph = new joint.dia.Graph();

const DDPaper = joint.dia.Paper.extend({
   
   events: {
      ...joint.dia.Paper.prototype.events,
      drop: 'onDrop',
      dragover: 'onDragover'
   },
   
   onDrop(evt) {
      const nativeEvent = evt.originalEvent;
      const { x, y } = this.clientToLocalPoint(nativeEvent.clientX, nativeEvent.clientY);
      this.trigger('paper:drop', evt, x, y);
   },
   
   onDragover(evt) {
      evt.preventDefault();
   }

});

const paper = new DDPaper({
  el: document.getElementById('paper'),
  width: 500,
  height: 300,
  model: graph
});

paper.on('paper:drop', function(evt, x, y) {
  console.log(evt, x, y);
  const elementJSON = {
    type: evt.originalEvent.dataTransfer.getData('type'),
    size: {
      width: 100,
      height: 100
    },
    position: { x: x - 50, y: y - 50 }
  };
  graph.addCell(elementJSON);
});