Fabric JS - objects snapping

HTML

<canvas id="canvas" width="800" height="500" style="border:1px solid #ccc"></canvas>

JavaScript

var canvas = this.__canvas = new fabric.Canvas('canvas');
//fabric.Object.prototype.transparentCorners = false;

var red = new fabric.Rect({
	id: 1,
  left: 100,
  top: 50,
  width: 100,
  height: 100,
  fill: 'red',
  angle: 15,
  originX: 'center',
  originY: 'center'
});
canvas.add(red);

var green = new fabric.Rect({
	id: 2,
  left: 250,
  top: 180,
  width: 100,
  height: 100,
  fill: 'green',
  angle: 45,
  originX: 'center',
  originY: 'center'
});
canvas.add(green);
canvas.renderAll();

canvas.on("object:moving", function(e){
	const draggableObj = e.target;
  const draggableObjBound = draggableObj.getBoundingRect();
  
  canvas.forEachObject(function(obj) {
    if (obj.id !== draggableObj.id) {
      var bound = obj.getBoundingRect();
      if (draggableObj.top - draggableObj.height / 2 > bound.top - 10 && draggableObj.top - draggableObj.height / 2 < bound.top + 10) {
        draggableObj.setTop(bound.top + draggableObjBound.height / 2);
      }
if (draggableObj.left - draggableObj.width / 2 > bound.left - 10 && draggableObj.left - draggableObj.width / 2 < bound.left + 10) {
        draggableObj.setLeft(bound.left + draggableObjBound.width / 2);
      }
    }
  });
        draggableObj.setCoords();
});

canvas.forEachObject(function(obj) {
  var setCoords = obj.setCoords.bind(obj);
  obj.on({
    moving: setCoords,
    scaling: setCoords,
    rotating: setCoords
  });
});

canvas.on('after:render', function() {
  canvas.contextContainer.strokeStyle = '#555';
  canvas.forEachObject(function(obj) {
    var bound = obj.getBoundingRect();
    canvas.contextContainer.strokeRect(
      bound.left,
      bound.top,
      bound.width,
      bound.height
    );
  })
});