Trouble with jQuery UI draggable, droppable, and sortable combo - jquery-ui

Question

Seems like I can choose only 2. :)
Here's where I'm at. I can sort the droppable divs and I can drag the ui-draggable, but I cannot drop ui-draggable into the ui-widget-header divs. :/
HTML:
<div class="large-9 small-9 columns">
<div id="paginationPageDisplay" class="dropme paginationContainer ui-sortable">
<div class="droppable ui-widget-header">
<div class="droppable ui-widget-header">
</div>
</div>
<div class="large-3 small-3 columns">
<div id="paginationAdDisplay" class="paginationContainer">
<div class="adThing ui-draggable">1/4</div>
<div class="adThing ui-draggable">1/2</div>
<div class="adThing ui-draggable">Full Page</div>
</div>
</div>
CSS:
.paginationContainer {
height: 1500px;
margin-right: 1px;
border: 1px solid #CCCCCC;
}
.adThing {
display: inline-block;
width: auto;
height: auto;
padding: 8px 15px;
border: 1px solid #ccc;
text-align: center;
background: #eee;
}
.dropme {
display: inline-block;
width: auto;
height: auto;
overflow: hidden;
margin-top: 20px;
}
.droppable {
height: 120px;
width: 90px;
padding: 2px;
margin: 10px 3px;
background: #F9F9F9;
border: 1px solid #CCCCCC;
float: right;
}
JS:
$('.adThing').draggable({
cursor: 'pointer',
connectWith: '.dropme',
helper: 'clone',
opacity: 0.5,
zIndex: 10
});
$('.dropme').sortable({
connectWith: '.dropme',
cursor: 'pointer'
});
$('.droppable').droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
$("#paginationLoadButton").click(function() {
var pageCount, i, $pageDisplay = $("#paginationPageDisplay"), pageWidget;
$pageDisplay.html('');
pageCount = $("#paginationPageCount").val();
for (i=1; i<=pageCount; i++) {
pageWidget = '<div class="droppable ui-widget-header">' + i + '<p></p></div>';
$pageDisplay.html($pageDisplay.html() + pageWidget);
}
});

Answer 1

The problem was that I was binding droppable on document ready but those elements are generated by the button click. I moved the droppable bind into the button click event and it's resolved.
$("#paginationLoadButton").click(function() {
var pageCount, i, $pageDisplay = $("#paginationPageDisplay"), pageWidget;
$pageDisplay.html('');
pageCount = $("#paginationPageCount").val();
for (i=1; i<=pageCount; i++) {
pageWidget = '<div class="droppable ui-widget-header">' + i + '<p></p></div>';
$pageDisplay.html($pageDisplay.html() + pageWidget);
}
$('.droppable').droppable({
drop: function( event, ui ) {
$( this )
.addClass( "ui-state-highlight" )
.find( "p" )
.html( "Dropped!" );
}
});
});