JointJS SO Question

http://stackoverflow.com/questions/37144285/joint-js-how-apply-an-event-on-shapes-devs `restrictTranslate` paper option showcase

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 graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
  el: $('#paper'),
  width: width,
  height: height,
  gridSize: 1,
  model: graph,
  restrictTranslate: function() {
    return {
      x: 100,
      y: 0,
      width: 0,
      height: height
    }
  }
});

var m1 = new joint.shapes.devs.Model({
  position: {
    x: 20,
    y: 20
  },
  size: {
    width: 90,
    height: 90
  },
  inPorts: [''],
  outPorts: [''],
  attrs: {
    '.label': {
      text: 'Model2',
      'ref-x': .4,
      'ref-y': .2
    },
    rect: {
      fill: '#2ECC71'
    },
    '.inPorts circle': {
      fill: '#16A085',
      size:'20'
      
    },
    '.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]);