jQuery UI Draggable widget() 方法

jQuery UI是一种基于 Web 的技术，由使用 jQuery、JavaScript 库实现的 GUI 小部件、视觉效果和主题组成。 jQuery UI 是为网页构建 UI 界面的最佳工具。它还可以用于构建高度交互的 Web 应用程序，或者可以用于轻松添加小部件。

在本文中，我们将使用jQuery UI Draggable widget()方法返回一个包含 Draggable 元素的 jQuery 对象。它不接受任何功能参数。

句法：

var widget = $( ".selector" ).draggable( "widget" );

参数：此方法不接受任何参数。

返回类型：此方法返回一个包含可拖动元素的对象值。

CDN 链接：添加项目所需的这些 jQuery Mobile 脚本。

示例：此示例演示了jQuery UI Draggable widget()方法。

HTML

    
    
    
    
    
    
      
    
        .drag
        {
            width: 90px; height: 50px;
            border: 1px solid black;
            background-color:blue;
        }
        .drop2
        {
            width: 200px; height: 50px;
            border: 1px solid black;
            float : center;
            background-color:green;
        }
    
      
    
        $(function() {
            $("#btn").on('click', function () {
                var widget = $(".drag").draggable( "widget" );
                document.getElementById('spanID').innerHTML += 
                    "No of jQuery object : " 
                     + Object.keys(widget).length;
            });
              
            $( ".drag" ).draggable();
            $( ".drop2" ).droppable({
            drop: function( event, ui ) {
                $( this ).find( "p" ).html( "Dropped!" );
            }
            });
        });
    

  

    
        GeeksforGeeks
        jQuery UI Draggable widget() method
        
            Drag
        
        
        
            Drop here
        
        
        
        
    

输出：

jQuery UI Draggable widget() 方法

参考： https://api.jqueryui.com/draggable/#method-widget