Question

使用jQuery，我有一个名为dropblock的可拖动元素，其revert参数设置为true。当dropblock被放置在名为blocks的盒子列表上时，我希望它被放置的盒子 - 以及它的两个直接邻居 - 在{{{{}}之前改变它们的背景颜色（比如红色） 1}}恢复到原来的位置。但作为一名JavaScript初学者，我不知道如何开始这样做。当dropblock被删除时，是否有某种方法可以判断鼠标悬停在哪个框上？

在删除与此问题无关的所有内容之后，我的代码就是这样：

MVCE.html：

dropblock

MVCE.css：

<!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.js：

#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;
}

Answer 1

您可以在每个框上使用.droppable（）。然后你可以访问下一个和以前的兄弟姐妹来改变他们的颜色。

Answer 2

元素#blocks li需要droppable，因此您可以调用.droppable() method。

在drop event中，您将访问要放入的元素及其相邻的兄弟元素。在此示例中，.active类正被添加到目标元素及其兄弟（使用.next() / .prev()方法）。 .active类也将从以前所有活动元素中删除。

Example Here

$('#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 option。在上面的示例中，它设置为touch，因为draggable / droppable元素的大小相同。

当元素放在其上时，更改框的背景颜色

2 个答案: