jQuery UI Sortables - Empty Table

Can't seem to drag into an empty table

by vanlien129

HTML

<div id="pagebuilder">
    
    <div class="sortable-el text">
      <span class="name">Text 1</span>
    </div>
    
    <div class="sortable-el section">
      <span class="name">Section 1</span>
      <div class="section-inner">
        <div class="sortable-el text">
          <span class="name">Text 2</span>
        </div>
      </div>
    </div>
    
    <div class="sortable-el section">
      <span class="name">Section 2</span>
      <div class="section-inner">
        <div class="sortable-el text">
          <span class="name">Text 3</span>
        </div>
        <div class="sortable-el text">
          <span class="name">Text 4</span>
        </div>
      </div>
    </div>
    
</div>

CSS

#pagebuilder {
 padding: 40px; 
}

.sortable-el {
  background: #ffffff;
  margin-bottom: 10px;
  padding: 10px;
}

.sortable-el .sortable-el {
  background: #f0f0f0;
  
}

.sortable-el > .name {
  display: block;
}

JavaScript

jQuery( ".section-inner" ).sortable({
		revert: true,
		connectWith: ".section-inner,#pagebuilder",
		items: "> div.sortable-el"
	});