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>