jQuery UI 中 Draggable、Droppable、Resizable、Selectable 的用途是什么？

在本文中，我们将详细了解 Draggable、Droppable、Resizable 和 Selectable 小部件及其用法。

jQuery UI Draggable： jQuery UI Draggable 小部件用于执行拖动操作。此小部件允许使用鼠标移动元素。此小部件中有许多选项、方法和事件可用。

示例：在此示例中，我们将使用 Draggable opacity Option 来更改 div 元素在拖动时的不透明度。

HTML

    
        
        
        
        
  
        
            h1 {
                color: green;
            }
  
            #div_element {
                width: 150px;
                height: 150px;
                background: green;
                display: flex;
                justify-content: center;
                align-items: center;
                text-align: center;
            }
        
    
  
    
        GeeksforGeeks
  
        jQuery UI Draggable opacity Option
  
        Div content
  
        
            $(function () {
                $("#div_element").draggable({
                    opacity: 0.4,
                });
            });
        
    

输出：

jQuery UI Droppable： jQuery UI Droppable 小部件用于执行放置操作。此小部件为可拖动元素创建目标。此小部件中有许多选项、方法和事件可用。

示例：在此示例中，我们将使用 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 accept Option
  
        Drop here
        Drag me
  
        
            $("#div2").draggable();
            $("#div1").droppable({
                accept: "#div1",
            });
        
    

输出：

jQuery UI Resizable： jQuery UI Resizable 小部件用于执行大小调整操作。此小部件使用鼠标更改元素的大小。此小部件中有许多选项、方法和事件可用。

示例：在此示例中，我们将使用 Resizable animate Option 对框进行动画处理并将其大小调整为调整大小后的最终大小。

HTML

    
        
        
        
        
        
            h1 {
                color: green;
            }
  
            #first_div {
                width: 150px;
                height: 150px;
                background: green;
                margin: 20px;
                display: flex;
                justify-content: center;
                align-items: center;
            }
        
    
  
    
        GeeksforGeeks
  
        jQuery UI Resizable animate Option
        First Div
  
        
            $(function () {
                $("#first_div").resizable({
                    animate: true,
                });
            });
        
    

输出：

jQuery UI Selectable： jQuery UI Selectable 小部件用于执行选择事件。此小部件使用鼠标单独或成组选择元素。此小部件中有许多选项、方法和事件可用。

示例：在此示例中，我们将使用 Selectable cancel Option 来防止选择从匹配的元素开始。

HTML

    
        
        
        
        
  
        
            h1 {
                color: green;
            }
  
            #list .ui-selecting {
                background: greenyellow;
            }
  
            #list .ui-selected {
                background: green;
            }
        
    
  
    
        GeeksforGeeks
  
        jQuery UI Selectable cancel Option
  
        
            Data Structure
            Algorithm
            C++
            Java
            HTML
            Bootstrap
            PHP
        
  
        
            $("#list").selectable({
                cancel: "#GFG1, #GFG2",
            });
        
    

输出：