title: Drag and drop with 2 drop target
body: <p>I am looking for an example of drag and drop where the drag item has two distinct areas that have to match up with two droppable areas.</p>
  
  <p>Example:
  <img src="https://i.stack.imgur.com/93qNu.jpg" alt="alt text"></p>
  
  <p>I would like the blue drag item to revert unless it is dropped in a position where each of its red children land on a green area.</p>
  
  <p>Ideally I would like to use jquery ui (as I have experience with it), but any javascript library would be fine, thanks in advance.</p>