在拖动时防止jquery中div的冲突

Question

我添加了preventcollision代码，但似乎它不起作用，因为两个div都重叠，我想要做的是在“col1”，“col2”，“col3”中拖动“any1”和“any2”，但它们不应该在容器中重叠并调整自己。

段：

$(document).ready(function() {

  $("#any1").draggable({
    obstacle: "#any2",
    preventCollision: true
  });

  $("#col2").droppable({
    accept: "#any1"
  });


  $("#any2").draggable({
    obstacle: "#any1",
    preventCollision: true
  });

  $("#col2").droppable({
    accept: "#any2"
  });
});

#any1 {
  position: relative;
  height: 150px;
  width: 150px;
  border-radius: 5px;
  background-color: #cc0000;
  left: 25px;
}
#any2 {
  position: relative;
  height: 150px;
  width: 150px;
  border-radius: 5px;
  background-color: #cc0000;
  left: 150px;
}
#col1 {
  width: 430px;
  height: 500px;
  background: red;
  border: 3px solid #73AD21;
  float: left;
  resize: none;
}
#col2 {
  width: 430px;
  height: 500px;
  background: green;
  border: 3px solid #73AD21;
  float: left;
}
#col3 {
  width: 430px;
  height: 500px;
  background: blue;
  border: 3px solid #73AD21;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div>
  <div id="col1">
  </div>

  <div id="col2">
    <div id="any1"></div>
    <div id="any2"></div>
  </div>
  <div id="col3">
  </div>
</div>