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-droppablecustom-droppable-activecustom-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-droppablecustom-droppable-activecustom-droppable-hover。然后,我们给这三个类名称分别指定了不同的样式:

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

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

示例2: 禁用拖放容器

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

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

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

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