📌  相关文章
📜  jQuery UI Droppable hoverClass 选项(1)

📅  最后修改于: 2023-12-03 15:16:44.782000             🧑  作者: Mango

jQuery UI Droppable hoverClass 选项介绍

在使用 jQuery UI Droppable 时，我们可以使用 hoverClass 选项来指定拖动到可放置区域时，目标元素的悬停样式。

基本语法
$(selector).droppable({
  hoverClass: "custom-hover-class"
});
  • selector：可以是任何 jQuery 选择器，用于指定可接受拖放的元素。
  • hoverClass：用于指定悬停样式的 CSS 类名。
实例演示

我们可以通过以下代码演示 hoverClass 的功能。

<!DOCTYPE html>
<html>
<head>
  <title>jQuery UI Droppable hoverClass 选项</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <style>
    #draggable {
      width: 100px;
      height: 100px;
      background: #f00;
    }

    #droppable {
      width: 200px;
      height: 200px;
      border: 2px dashed #000;
    }

    .custom-hover-class {
      background: #00f;
    }
  </style>
  <script src="//code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    $(function () {
      $("#draggable").draggable();
      $("#droppable").droppable({
        hoverClass: "custom-hover-class"
      });
    });
  </script>
</head>
<body>
  <div id="draggable">可拖动元素</div>
  <div id="droppable"></div>
</body>
</html>

在上述代码中，我们在 droppable 元素上设置了 hoverClass 为 "custom-hover-class"。当 draggable 元素拖动到 droppable 元素上方时，droppable 元素的背景色将变为蓝色。

总结

jQuery UI Droppable hoverClass 选项可用于设置可放置元素的悬停样式，适用于各种拖放交互场景。