jquery-ui overriding jquery-ui-droppable

activeClass and hoverClass not work in jQuery UI Droppable

My drop function fires and everything seems correct but the hoverClass and activeClass does not change the div background.

I've tried this under Chrome, Firefox, and Edge. It has to be something I am missing but I cannot determine what.

CSS:

    <style>
        #main {
            float: left;
        }

        .sub {
            width: 100px;
            height: 100px;
            border: 2px solid black;
            margin: 5px;
        }

        #area1, #area2{
            width: 400px;
            height: 400px;
            border: 3px solid goldenrod;
            margin: 5px 20px;
            float: left;
        }

        .startmoving {
            background: darksalmon;
        }

        .reached {
            background-color: darkorange;
        }
    </style>

Javascript:

$(document).ready(function () {            
            $(".sub").draggable();
            $("#area2").droppable({
                accept: "#_3",
                hoverClass:"reached",
                activeClass: "startmoving",
                tolerance: "touch",
                drop: function () { $(this).css("background", "gray"); }
            });
});

HTML:

<body>
    <div id="main">
        <div class="sub" id="_0" style="background-color: rgb(0, 247, 255);"></div>
        <div class="sub" id="_1" style="background-color: rgb(0, 195, 255);"></div>
        <div class="sub" id="_2" style="background-color: rgb(132, 0, 255);"></div>
        <div class="sub" id="_3" style="background-color: rgb(212, 0, 255);"></div>
    </div>
    <div class="area">
        <div id="area1"></div>
        <div id="area2"></div>
    </div>
</body>

I read this article and I use .ui-droppable.ui-droppable-hover.reached and .ui-droppable-hover.reached and .ui-droppable.reached But no difference

Solution

Those are legacy, deprecated in version 1.12, in favor of the classes option.

$(function() {
  // activeClass & hoverClass deprecated in Version 1.12, in favor of the classes option
  // https://api.jqueryui.com/droppable/#option-classes
  $(".sub").draggable();
  $("#area2").droppable({
    accept: "#_3",
    classes: {
      "ui-droppable-hover": "reached",
      "ui-droppable-active": "startmoving"
    },
    tolerance: "touch",
    drop: function() {
      $(this).css("background", "gray");
    }
  });
});

#main {
  float: left;
}

.sub {
  width: 100px;
  height: 100px;
  border: 2px solid black;
  margin: 5px;
}

#area1,
#area2 {
  width: 400px;
  height: 400px;
  border: 3px solid goldenrod;
  margin: 5px 20px;
  float: left;
}

.startmoving {
  background: darksalmon;
}

.reached {
  background-color: darkorange;
}

<link rel="stylesheet" href="https://code.jquery.com/ui/1.14.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://code.jquery.com/ui/1.14.0/jquery-ui.js"></script>
<div id="main">
  <div class="sub" id="_0" style="background-color: rgb(0, 247, 255);"></div>
  <div class="sub" id="_1" style="background-color: rgb(0, 195, 255);"></div>
  <div class="sub" id="_2" style="background-color: rgb(132, 0, 255);"></div>
  <div class="sub" id="_3" style="background-color: rgb(212, 0, 255);"></div>
</div>
<div class="area">
  <div id="area1"></div>
  <div id="area2"></div>
</div>