将元素放置在方框顶部时更改方框的背景色

Change background color of a box when an element is dropped on top of it

本文关键字：方框 背景色 元素 方框顶      更新时间：2023-09-26

使用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});
});

元素#blocks li需要是可丢弃的，因此您将调用.droppable()方法。

在drop事件中，您将访问要放入的元素及其相邻的同级元素。在本例中，.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');
    }
});

根据您的喜好更改tolerance选项。在上面的示例中，它设置为touch，因为可拖动/可丢弃元素的大小相同。

您可以在每个框上使用.dropable（）。然后，您可以访问下一个和上一个兄弟姐妹来更改它们的颜色。

相关文章：