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

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

jQuery UI Droppable activeClass 选项

jQuery UI是一个基于jQuery的UI库，其中包括了可拖拽、可排序、对话框等组件，可以方便地实现复杂的用户交互操作。

其中，Droppable组件用于在页面上创建可拖放的目标元素，并指定哪些元素可以拖放到该目标元素上。activeClass是Droppable组件的一个选项，它用于指定当拖动元素进入Droppable目标元素时，目标元素应该添加的样式类名。

语法
$( ".selector" ).droppable({
  activeClass: "custom-css-class"
});
  • selector: 选择器，用于指定要添加Droppable功能的元素。
  • activeClass: String，默认值为“ui-state-active”。指定当可拖放元素拖动进入目标元素时，目标元素添加的CSS样式类名。
示例

以下示例创建了三个可拖放的div元素，其中一个配有Droppable功能，当一个可拖放元素拖动进入第三个div元素时，该元素会添加一个自定义的CSS类名"highlight"。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Droppable activeClass option</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <style>
    #draggable1, #draggable2, #droppable {
      float: left;
      width: 100px;
      height: 100px;
      margin: 10px;
      background-color: #ccc;
      text-align: center;
    }
    .highlight {
      border: 2px solid red;
    }
  </style>
  <script src="//code.jquery.com/jquery-1.12.4.js"></script>
  <script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
    $( function() {
      $( "#draggable1, #draggable2" ).draggable();
      $( "#droppable" ).droppable({
        activeClass: "highlight"
      });
    });
  </script>
</head>
<body>
 
<div id="draggable1" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>
 
<div id="draggable2" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>
 
<div id="droppable" class="ui-widget-header">
  <p>Drop here</p>
</div>
 
 
</body>
</html>
结论

Droppable组件的activeClass选项提供了一种简单的方式来实现当可拖放元素进入目标元素时，改变目标元素的样式。同时，它可以与Droppable的其他选项组合使用，以实现更复杂的拖放效果。