博客

jQuery UI Droppable classes选项

  • Post category:jquery

jQuery UI 是一个流行的开源 JavaScript 库，它提供了一系列的界面组件和交互特效，使得我们的 web 应用能够更加友好和易用。其中之一的 Droppable 组件，可以让我们实现元素的拖拽和拖放，而 classes 选项则可以帮助我们自定义拖放元素时的动画效果、状态样式等。

classes 选项语法

classes 选项用于指定拖拽和接受元素时可能要添加的 CSS 类名称，通常有以下的可选值：

  • ui-droppable: 用于标识一个可以放置拖拽元素的容器；
  • ui-droppable-active: 拖拽元素正在悬停在容器内时的样式；
  • ui-droppable-hover: 拖拽元素进入容器时的样式；
  • ui-droppable-disabled: 用于标识一个已禁用的容器。

其中，前三个值是比较常用的，最后一个一般用于禁用拖放容器时的样式修改。

classes 选项的语法如下：

$( ".selector" ).droppable({
   classes: {
      "ui-droppable": "custom-droppable",
      "ui-droppable-active": "custom-droppable-active",
      "ui-droppable-hover": "custom-droppable-hover"
   }
});

上述代码中，我们为 droppable 容器指定了三个自定义的 CSS 类名称，分别为 custom-droppable、custom-droppable-active 和 custom-droppable-hover。

示例1: 修改默认样式

假如我们现在有一个 div 容器，它希望能够接受块级元素的拖放，我们可以这样来修改默认样式：

<!DOCTYPE html>
<html>
<head>
    <title>示例1: 修改默认样式</title>
    <style type="text/css">
        #droppable {
            width: 300px;
            height: 300px;
            border: 2px dashed red;
            margin-top: 20px;
        }
        #draggable {
            width: 50px;
            height: 50px;
            background-color: yellow;
            border: 2px solid green;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.css">
    <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="//cdn.bootcss.com/jqueryui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
    <div id="draggable" class="ui-widget-content">
         Drag me to my target
     </div>
     <div id="droppable" class="ui-widget-header">
         Drop here
     </div>
    <script type="text/javascript">
    $(function() {
        $( "#draggable" ).draggable();
        $( "#droppable" ).droppable({
          classes: {
            "ui-droppable": "custom-droppable",
            "ui-droppable-active": "custom-droppable-active",
            "ui-droppable-hover": "custom-droppable-hover"
          }
        });
    });
    </script>
</body>
</html>

上面的代码中，我们为 droppable 容器指定了三个自定义的 CSS 类名称，这里是 custom-droppable、custom-droppable-active 和 custom-droppable-hover。然后，我们给这三个类名称分别指定了不同的样式：

.custom-droppable {
    border: 2px dashed gray;
}
.custom-droppable-active {
    background-color: gray;
}
.custom-droppable-hover {
    background-color: white;
}

在上述代码中，当我们开始拖拽元素进入 droppable 容器时，它所在的容器会添加 ui-droppable-active 和 custom-droppable-active 两个类名称，并改变背景色。当我们结束拖放操作，并将元素放到了 droppable 容器内部时，它会添加 ui-droppable-hover 和 custom-droppable-hover 两个类名称，并改变背景色。最后， 当我们离开 droppable 容器时，它就会移除 ui-droppable-active 和 ui-droppable-hover 两个类名称，恢复默认背景色。

示例2: 禁用拖放容器

如果我们希望禁用一个 droppable 容器，可以以以下方式指定 classes 选项：

$( "#droppable" ).droppable({
    disabled: true,
    classes: {
        "ui-droppable-disabled": "custom-droppable-disabled"
    }
});

上述代码中，我们指定了 ui-droppable-disabled 和 custom-droppable-disabled 两个类名称，然后在 droppable 容器上添加了 disabled: true。这样一来，元素就无法在该容器内拖放，同时容器所具有的相应样式也变得不可用。

以上就是关于 jQuery UI Droppable classes 选项的详细讲解和示例，希望对你有所帮助。

Tags: