Dragging by class versus div id has weird results on droppable. Dropping outside the droppable seems to drop, but inside does not.

Dragging by class versus div id has weird results on droppable. Dropping outside the droppable seems to drop, but inside does not.

This code used on chrome illustrates the issue;

Couple of things to mention,
1) if draggable22 has float: left; specified (like draggable 21) symptom seems to go away.
2) why draggable22 is considered dropped when you drag it just to the left of the droppable, I am not sure.

<meta charset="UTF-8" />
<style type="text/css">
#draggable21 { float: left; }
#draggable22 {  }
#draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
#droppable2 { width: 420px; height: 120px; padding: 0.5em; float: left; margin: 10px; }
</style>
<script type="text/javascript">
$(function() {
$(".draggable2").draggable();
$("#droppable2").droppable({
accept: ".draggable2",
activeClass: 'ui-state-hover',
drop: function(event, ui) {
$(this).addClass('ui-state-highlight').find('p').html('Dropped!');
}
});

});
</script>

<div id="draggable22" class="draggable2">
<p>draggable22 here</p> <i>If you drag and drop on droppable it will not be dropped. If you drag and drop to the left of droppable, voila I am dropped</i>
</div>
<br/>
<div id="draggable21" class="draggable2">
<p>draggable21 here, you can highlight and drop me.<br/>But if you take my float style away, I will be like draggable22.</p>
</div>
<br/>
<div id="draggable2" class="draggable2">
<p>draggable2 highlight and drop</p>
</div>
<br/>
<div id="droppable2" class="ui-widget-header">
<p>Drop here</p>
</div>