title: jQuery UI Droppable formatting and positioning displays incorrectly
body: <p>I am having problems with what should be a simple jQuery-UI droppable/sortable list. In the source list I have several draggable LI elements and my destination list uses the last child as the drop target.</p>
  
  <p>I'm having two problems:</p>
  
  <p>1) Even though I'm using insertBefore the last-child it is inserting after.</p>
  
  <p>2) The drop target formatting behaves strangely after the drop. The block drops down as if it has a margin on the top. It should stay in line with the newly created list elements.</p>
  
  <p><a href="http://jsfiddle.net/HHMxS/9/" rel="nofollow">Here is the fiddle</a> to demonstrate the issue. Drag column names from the top list to the drop target in the bottom element. To keep the code here in the question as well here are the various sections:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="report_builder"&gt;
  &lt;ul id="columns" class="column_list"&gt;
      &lt;li  id="null"  rel="recid"  &gt;Id
      &lt;/li&gt;
  
      &lt;li  id="null"  rel="street1"  &gt;Address
      &lt;/li&gt;
  
      &lt;li  id="null"  rel="street2"  &gt;Address 2
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;br/&gt;&lt;br/&gt;
  &lt;ul id="report_layout_1" class="report_layout"&gt;
      &lt;li&gt;
      &lt;span id="null_form" &gt;&lt;span  id="null"  &gt;Drop Field Here&lt;/span&gt;&lt;/span&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;​
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>jQuery("ul.column_list &gt; li").draggable({
      appendTo: "#report_layout_1",
      cursor: 'move',
      helper: "clone"
  });
  
  sortOptions = {
      placeholder: "ui-state-highlight",
      forcePlaceholderSize: true,
      axis: 'x',
      opacity: 0.8,
      items: "li:not(li:last-child)",
      cancel: "li:last-child, input, select"
  };
  
  dropOptions = {
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      accept: ":not(.report_layout &gt; li)",
      drop: function( event, ui ) {                
          jQuery( this ).find( ".placeholder" ).remove();
          var tableColumn = ui.draggable.attr('rel');
          jQuery( "&lt;li rel=\"" + tableColumn + "\"&gt;&lt;/li&gt;" ).html( ui.draggable.text() + '&lt;br/&gt;&lt;input type="text" class="report-column-value"/&gt;&lt;br/&gt;&lt;br/&gt;').insertBefore( jQuery("li:last-child", jQuery(this).parent()) );
      }
  });        
  jQuery(".report_layout &gt; li:last-child").droppable(dropOptions);
  jQuery( ".report_layout" ).sortable(sortOptions);
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#report_builder li {
      font-size: 8pt;
  }
  
  #report_builder &gt; ul {
      border: 2px solid black;
      margin-left: 10px;
  }
  
  .droppable {
      margin: 0;
      vertical-align: top;
  }
  
  ul.column_list {
      width: 100px;
  }
  
  ul.column_list &gt; li {
      padding: 5px;
      border: 1px solid #ccc;
      border-top: 10px solid #ccc;
      cursor: move;
  }
  .report_layout {
      height: 150px;
  }
  .report_layout &gt; li {
      display: inline-block;
      padding: 5px;
      margin-left: 2px;
      border: 1px solid #ccc;
      border-top: 10px solid #ccc;
      height: 100px;
      background-color:#fff;
  }
  .report_layout &gt; li:last {
      cursor: default;
  }
  .report_layout &gt; li a {
      cursor: pointer;
  }
  .report_layout &gt; li:nth-child(even) {
      background-color:#eee;
  }
  
  .report_layout .droppable {
      margin: 10;
  }
  
  #report_builder .ui-draggable-dragging {
      display: inline-block;
      padding: 5px;
      border: 1px solid #ccc;
      border-top: 10px solid #ccc;
      background-color: white;
      z-index: 21000;
  }
  #report_builder input.report-column-value {
      width: 95px;
  }
  </code></pre>
  
  <p>​</p>