我的 drop 函数触发，一切似乎都是正确的，但hoverClass和activeClass不会改变div背景。
我已经在 Chrome、Firefox 和 Edge 下尝试过此操作。这一定是我缺少的东西，但我无法确定是什么。
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>
我读了这篇文章并且我使用
.ui-droppable.ui-droppable-hover.reached.ui-droppable-hover.reached.ui-droppable.reached这些是遗留的，在版本 1.12 中已弃用，有利于类选项。
$(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>