Javascript-форум - В droppable не работает greedy

<html>
<head>
    <title>Влож акцепторы</title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
</head>

<body>
<div id="draggable" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>
 
<div id="droppable" class="ui-widget-header" style="border: 2px black solid; padding:50px; height: 100px;">
    <div style="border: 1px blue solid; height: 100px; text-align:center;line-height:100px" id="nested12">
		DROP
	</div>
 
</div>


<div style="border: 2px black solid; padding:50px; height: 100px;" id="nested1">
	<div style="border: 1px blue solid; height: 100px; text-align:center;line-height:100px" id="nested2">
		DROP
	</div>
</div>
<script>
    $( function() {
    $( "#draggable" ).draggable();
    $( "#nested1" ).droppable({
        greedy:true,
      drop: function( event, ui ) {
        alert("Dropped!");
     
      }
    });
    
    $( "#nested2" ).droppable({
      drop: function( event, ui ) {
        alert("Dropped2!");
     
      }
    });
  } );
</script>
</body>
</html>

Я гриди поставил. почему не работает и при наведении на nested2 сначала срабатывает первое свойство?