jQuery UI Droppable widget() 方法

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

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

句法：

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

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

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

CDN 链接：添加 您的项目将需要以下 jQuery Mobile 脚本。

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

HTML

   
   
   
   
   
   
      

    .drag
    {
        width: 90px; height: 50px;
        border: 1px solid black;
        background-color:blue;
    }
    .drop2, .drop3 {
        width: 200px; height: 50px;
        border: 1px solid black;
        float : center;
        background-color:green;
    }

      

    $(function() {
          
        $("#btn").on('click', function () {
            var widget = $(".drop2").droppable( "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!" );
            }
        });
          
        $( ".drop3" ).droppable("disable");
              
        $( ".drop3" ).droppable({
            drop: function( event, ui ) {
                $( this ).find( "p" ).html( "Dropped!" );
            }
        });
    });


  

    
        GeeksforGeeks
      
        jQuery UI Droppable widget() method
          
        
            Drag
  
        
        
        
            Drop here
  
        
        
        
            Disable - Can't Drop Here
  
        
        
        
        
    

输出：

jQuery UI Droppable widget() 方法

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