title: JQuery UI - Droppable or Sort "clear" absolute position elements near each other
body: <p>I have flexible notepad (or Calendar) like tool on my page. I don't want to use Full Calendar and I can't seem to accomplish one particular functionality to complete my custom project.</p>
  
  <p>I'm probably going to get down voted on this one because I may be to general on my approach (the best starting point), but I'll do my best to ask a real question of value here.</p>
  
  <p>The Question: <br/> Can absolute positioned elements "detect" each other and move down (like JQ UI sortable) when a new element is dropped in the same parent?</p>
  
  <p>I have two or more adjacent cells (parents) (like a Calendar), the "notes" (child elements) have to be absolute position to exceed the width of their parent.<br/><br/>
  Here is the Generic "staring point": <br/>
  *My Grid (parents) can be Div or Table. I've managed to get the child elements to extend/overlap beyond the parent to cover multiple adjacent cells. They drop perfect on the droppable area and align top left, but the dropped items don't see each other. </p>
  
  <p>To FullCalander's credit, it does this perfect in the month view:(below)</p>
  
  <ul>
  <li>So my issue may be that absolute position is not the way to go</li>
  <li>Sortable may be the answer, but the child wont exceed the parent width</li>
  <li>I've tried CSS and read many absolute position articles here at Stack</li>
  </ul>
  
  <p><strong>I have a feeling, my approach is wrong</strong> (using absolute) so hopefully the down voters will have mercy on my soul and explain that the answer to my question is "no, they can not" but make a suggestion to improve my approach at this challenge.</p>
  
  <p><a href="https://i.stack.imgur.com/BhQRb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BhQRb.png" alt="enter image description here"></a></p>
  
  <pre><code>$(".droppable").droppable({
      drop: function (event, ui) {
          accept: ".draggable"
          activeClass: "ui-state-hover"
          hoverClass: "ui-state-active"
          $(ui.draggable).offset($(this).offset());
          // $(ui.draggable).data('dropped', true); 
          //var count = $(this).length;
          var currentPos = $(this).position();
          $("#pos").text("CURRENT: \nLeft: " + currentPos.left + "\nTop: " + currentPos.top);
  
  var count = $(this).length;          //wrong child count or absolute not found/counted
  var count = $(this).children.length; //wrong child count or absolute not found/counted
          // alert(count);
  
  //this shoud show child count like .length - broken
  // var countChild = (document.elementFromPoint(currentPos.top, currentPos.left));
     // alert(countChild);
     // console.log(countChild);   
    }
  });
  </code></pre>
  
  <p><strong><a href="http://jsfiddle.net/hhb8962o/6/" rel="nofollow noreferrer">JSFiddle</a></strong></p>