当一个元素被放在框的上方时，改变它的背景色。
使用jQuery，我有一个名为dropblock的可拖放元素，其revert参数设置为true。当dropblock被放到一个名为blocks的框列表中时，我希望在dropblock恢复到原来的位置之前，将其投到的框中--以及它的两个近邻--改变它们的背景色(比如红色)。但作为一个JavaScript初学者，我不知道如何开始做这件事。当dropblock被丢弃时，有什么方法可以判断鼠标悬停在哪个盒子上？
下面是我的代码在去掉与这个问题无关的所有内容后的样子：
MVCE.html：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Stackexchange MVCE</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.js"></script>
<script src="MVCE.js"></script>
<link rel="stylesheet" href="MVCE.css">
</head>
<body>
<ul id="blocks">
<li class="ui-state-default" id="block-1"></li>
<li class="ui-state-default" id="block-2"></li>
<li class="ui-state-default" id="block-3"></li>
<li class="ui-state-default" id="block-4"></li>
<li class="ui-state-default" id="block-5"></li>
<li class="ui-state-default" id="block-6"></li>
</ul>
<ul id="dropblock">
<li class="ui-state-default"></li>
</ul>
</body>
</html>MVCE.css：
#blocks {
list-style-type: none;
display: inline-block;
width: 300px;
}
#blocks li {
margin: 3px 3px 0px 0;
width: 30px;
height: 30px;
}
#dropblock {
list-style-type: none;
display: inline-block;
vertical-align: top;
position: relative;
width: 150px;
}
#dropblock li {
margin: 3px 3px 0px 0;
float: left;
width: 30px;
height: 30px;
font-size: 4em;
text-align: center;
}MVCE.js：
$(function() {
$( "#dropblock" ).draggable({
revert: true});
});回答 2
Stack Overflow用户
发布于 2015-03-01 20:38:36
元素#blocks li需要是可下垂，因此您将调用方法。
在事件中，您将访问正在放置的元素及其相邻的同级元素。在本例中，.active类将被添加到目标元素及其同级元素中(使用.next()/.prev()方法)。.active类也将从所有以前活动的元素中删除。
这里的例子
$('#dropblock').draggable({
revert: true
});
$('#blocks li').droppable({
tolerance: 'touch',
drop: function(event, ui) {
$('#blocks li.active').removeClass('active');
$(this).add($(this).next()).add($(this).prev()).addClass('active');
}
});根据您的喜好更改选项。在上面的示例中，它设置为touch，因为可拖/可下垂的元素大小相同。
Stack Overflow用户
发布于 2015-03-01 20:27:09
您可以在每个框上使用.droppable()。然后，您可以访问下一个和以前的兄弟姐妹，以改变他们的颜色。
https://stackoverflow.com/questions/28798428
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号