📜  jQuery UI Droppable 类选项

📅  最后修改于: 2022-05-13 01:55:53.604000             🧑  作者: Mango

jQuery UI Droppable 类选项

jQuery UI 由 GUI 小部件、视觉效果和使用 HTML、CSS 和 jQuery 实现的主题组成。 jQuery UI 非常适合为网页构建 UI 界面。

jQuery UI Droppable classes选项用于向小部件的元素添加其他类。

句法:

使用classes选项初始化 droppable。

$( "#divID" ).droppable({
 classes: {
   "ui-droppable": "highlight"
 }
});
  • 设置选项的值。

    $( "#divID" ).droppable( "option", 
        "classes.ui-droppable", "highlight" );
  • 获取classes选项的值。

    var themeClass = $( "#divID" )
        .droppable( "option", "classes.ui-droppable" );

CDN 链接:首先,添加项目所需的 jQuery UI 脚本。

示例:此示例演示了 jQuery UI Droppable选项。

HTML


  

    
    
    
  
    
  
    
        h1 {
            color: green;
        }
  
        div {
            color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
  
        #div2 {
            width: 150px;
            height: 150px;
            background: blue;
        }
  
        #div1 {
            position: absolute;
            left: 250px;
            width: 200px;
            height: 200px;
            background: green;
            color: #fff;
        }
    

  

    
        
            GeeksforGeeks
        
        jQuery UI Droppable classes Option
        Drop here
        Drag me
    
    
        $(document).ready(function () {
            $("#div2").draggable();
            $("#div1").droppable({
                classes: {
                    "ui-droppable": "highlight"
                }
            });
        });
    

  


输出:

jQuery UI Droppable 类选项

jQuery UI Droppable 类选项

参考: https://api.jqueryui.com/droppable/#option-classes