如何禁用 jQuery-ui 可拖动小部件？

在本文中，我们将了解如何使用 jQuery-ui 禁用可拖动小部件。 jQuery UI 由 GUI 小部件、视觉效果和使用 HTML、CSS 和 jQuery 实现的主题组成。 jQuery UI 非常适合为网页构建 UI 界面。 jQuery UI Draggable disabled Option 用于禁用可拖动元素，如果其值设置为 true。

句法：

$( ".selector" ).draggable({
   disabled: true/false
});

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

例子：

HTML

  

    
    
    
    
    
  
    
        How to disable jQuery-ui draggable widget ?
    
  
    
        #div_element {
            width: 150px;
            height: 150px;
            background: green;
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }
    

  

    
        GeeksforGeeks
  
        
            How to disable jQuery-ui draggable widget?
        
  
        Div content
        
        
    
  
    
        $(document).ready(function() {
            $(function() {
                $("#div_element").draggable({
                    disabled: false
                });
            });
            $("#disable").on('click', function() {
                $("#div_element").draggable({
                    disabled: true
                });
            });
        });
    

  

输出：