I am trying to make a drag-and-drop software using jQuery draggable and jQuery collision extension.

I have two obstacles [in Red] where I can not drag any element. The problem is I can not drag any element even when there are no obstacles.

Here is my problem https://jsfiddle.net/ayank007/gqd3z0cp/28/ In this example, I am assuming 1 foot = 13.75px, which is also the grid size.

$(".obj3").draggable({
  grid: [13.75,13.75],
  snap: true,
  snapTolerance: 0,
  obstacle: ".butNotHere",
  preventCollision: true,
  containment: "parent"
})

Even without the Grid and Snapping, it's not possible to drag the element.

I want to drag the green div in between the obstacles (red). And even though there is space to drag, I can not drag the green div in between the red ones.