<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 сначала срабатывает первое свойство?