JointJS SO Question

http://stackoverflow.com/questions/37144285/joint-js-how-apply-an-event-on-shapes-devs

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.min.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/0.9.7/joint.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jointjs/0.9.7/joint.css">
<!-- JointJS Fiddle -->
<div id="paper"></div>

CSS

#paper {
  display: inline-block;
  border: 1px solid gray;
}

JavaScript

var width = 400,
  height = 1000;

var ConstraintElementView = joint.dia.ElementView.extend({
  pointermove: function(evt, x, y) {
    joint.dia.ElementView.prototype.pointermove.apply(this, [evt, 100, y]);
  }
});

var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
  el: $('#paper'),
  width: width,
  height: height,
  gridSize: 1,
  model: graph,
  elementView: function(model) {
    return model instanceof joint.shapes.devs.Model ?
      joint.shapes.devs.ModelView.extend({
        pointermove: function(evt, x, y) {
          joint.dia.ElementView.prototype.pointermove.apply(this, [evt, 100, y]);
        }
      }) : ConstraintElementView
  }
});

var m1 = new joint.shapes.devs.Model({
  position: {
    x: 20,
    y: 20
  },
  size: {
    width: 90,
    height: 90
  },
  inPorts: [''],
  outPorts: [''],
  attrs: {
   
    '.inPorts': {
      fill: 'red'
    },
    '.outPorts circle': {
      fill: '#E74C3C'
    }
  }
});

var m2 = m1.clone();
m2.translate(0, 300);

var earth = new joint.shapes.basic.Circle({
  position: {
    x: 100,
    y: 20
  },
  size: {
    width: 20,
    height: 20
  },
  attrs: {
    text: {
      text: 'earth'
    },
    circle: {
      fill: '#2ECC71'
    }
  },
  name: 'earth'
});

graph.addCell([m1, m2, earth]);