jQuery UI Droppable instance() 方法

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

在本文中，我们将使用jQuery UI Droppable instance() 方法来检索 droppable 的实例对象。如果元素没有任何关联的实例，则返回“未定义”。它不接受任何功能参数。

句法：

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

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

返回类型：此方法返回一个包含可放置对象的实例对象的对象值。

CDN 链接：您的项目将需要以下 jQuery Mobile 脚本，因此我们需要将这些脚本添加到您的项目中。

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

HTML

   
   
   
   
    
   
    

    .drag
    {
        width: 90px; 
        height: 40px;
        border: 1px solid black;
        background-color:blue;
    }
    .drop2, .drop3 
    {
        width:200px; 
        height:40px;
        border:1px solid black;
        float: center;
        background-color:green;
    }
      
    #btn
    {
        padding: 0.5;
        font-size:25px;
        height: 40px;
        width: 150px;
    }

      

    $(function() {
          
        $("#btn").on('click', function () {
            var insta = $(".drop3").droppable( "instance" );
            console.log(insta);
        });
          
        $(".drag").draggable();
        $(".drop2").droppable({
            drop: function( event, ui ) {
                $( this ).find( "p" ).html( "Dropped!" );
            }
        });
          
        $(".dropp3").droppable("disable");
              
        $(".dropp3").droppable({
            drop: function( event, ui ) {
                $( this ).find( "p" ).html( "Dropped!" );
            }
        });
    });


  

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

  

输出：

jQuery UI Droppable instance() 方法

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