title: Disable jQueryUI Sortable item from being dropped in a certain area
body: <p>I have a kanban style drag and drop board using jQueryUI Sortable.</p>
  
  <p>Each column is a <strong>Board</strong> and each draggable Div on the board is a <strong>Card</strong>.</p>
  
  <p>A <strong>Board</strong> can have <strong>Child-boards</strong> which group a set of related boards under 1 <strong>parent board</strong>.</p>
  
  <p>I am having an issue with the Drag and Drop of cards to a new board.  The problem is when a <strong>Card</strong> is dragged onto a Board that has child-boards and the card is dropped prematurely before entering the child-board table.</p>
  
  <p>It results in the card being dropped inside the parent board <code>&lt;td&gt;</code> table cell but before getting to go into the child board <code>&lt;table&gt;</code> which is inside the parent board <code>&lt;td&gt;</code>.</p>
  
  <p>This image should help explain a little better...</p>
  
  <p>The red boxes show the HTML for the 2 Boards I have that have <strong>child-boards</strong>.<br>
  The <code>&lt;td&gt;</code> table cells above and below those boxes are regular boards with no child-boards.  A card can be dropped into those <code>&lt;td&gt;</code> cells.</p>
  
  <p>ON the Parent boards that have child-boards.  You can see that they have a <code>&lt;table&gt;</code> inside of there <code>&lt;td&gt;</code>.</p>
  
  <p>The issue is when the card gets dragged onto a board that has child-boards and the card is dropped to soon so it results in the card being in between the <code>&lt;td&gt;</code> and the child board <code>&lt;table&gt;</code>....</p>
  
  <p><img src="https://i.stack.imgur.com/mUPHz.png" alt="enter image description here"><br>
  <a href="https://i.stack.imgur.com/mUPHz.png" rel="nofollow noreferrer">http://i.stack.imgur.com/mUPHz.png</a></p>
  
  <hr>
  
  <p><strong>Here is an example showing the Card that was dropped in between the parent board and the child board in a "undefined" area...I need to somehow make it not possibble to drop a card in this area!</strong>  </p>
  
  <p><img src="https://i.stack.imgur.com/cGOpf.png" alt="enter image description here"><br>
  <a href="https://i.imgur.com/9N6tkbj.png" rel="nofollow noreferrer">http://i.imgur.com/9N6tkbj.png</a></p>
  
  <hr>
  
  <p><strong>Image showing what a Board and cards are and the child-board vs Parent with no child board</strong>  </p>
  
  <p><img src="https://i.stack.imgur.com/Bfe02.png" alt="enter image description here"></p>
  
  <hr>
  
  <p><strong>Example showing a card being dragged into the bad position and how it moves the child board table out of the way and allows a drop in between the parent and child.  I need to prevent this from happening somehow?</strong>  </p>
  
  <p><img src="https://i.stack.imgur.com/gxi8D.png" alt="enter image description here"></p>
  
  <hr>
  
  <p><strong>Perhaps there is a way to prevent jQueryUI Sortable from allowing a Drop if the <code>&lt;td&gt;</code> with CSS class <code>column ui-sortable</code> has a <code>&lt;table&gt;</code> inside of it?</strong></p>
  
  <hr>
  
  <p><strong>Here is a quick JSFiddle to show the problem</strong> <a href="http://jsfiddle.net/jasondavis/j37131oo/3/" rel="nofollow noreferrer">http://jsfiddle.net/jasondavis/j37131oo/3/</a></p>