title: Restrict jQuery draggable items from overlapping/colliding with sibling elements
body: <p>I need to use jQuery UI to restrict the containment area for draggable object with some additional restriction. I need prevent the draggable element from overlapping with other elements within the same container. I need to allow movement in "moveInHere" area but not "butNotHere" area. Is it possible?</p>
  
  <pre><code>&lt;div id="moveInHere"&gt;
  
      &lt;div id="dragMe"&gt; &lt;/div&gt;
  
      &lt;div id="butNotHere"&gt; &lt;/div&gt;
  
  &lt;/div&gt;
  
  
  &lt;script type="text/javascript"&gt;
  
      $("#dragMe").draggable({
          containment: "#moveInHere"
      });
  
  &lt;/script&gt;
  </code></pre>