jQuery UI的Droppable instance()方法

jQuery UI是一种基于网络的技术，由GUI部件、视觉效果和使用jQuery、JavaScript库实现的主题组成。它也可以用来建立高度互动的网络应用程序，或者可以用来轻松添加小工具。

在这篇文章中，我们将使用jQuery UI Droppable instance() 方法来检索droppable的实例对象。如果该元素没有任何相关的实例，”undefined “将被返回。它不接受任何参数来运作。

语法:

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

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

返回类型：该方法返回一个对象值，其中包含dropable的实例对象。

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

<link href = “https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css” rel = “stylesheet”>
<script src = “https://code.jquery.com/jquery-1.10.2.js”></script>
<script src = “https://code.jquery.com/ui/1.10.4/jquery-ui.js”></script>

例子：这个例子演示了jQuery UI Droppable instance()方法。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <link rel="stylesheet" href=
"//code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
   <script src=
"//code.jquery.com/jquery-1.12.4.js">
   </script>
    <script src=
"//code.jquery.com/ui/1.12.1/jquery-ui.js">
   </script>
    
<style>
    .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;
    }
</style>
      
<script>
     $(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!" );
            }
        });
    });
</script>
</head>
  
<body>
    <center>
        <h1 style="color:green;">GeeksforGeeks</h1>
      
        <h3>jQuery UI Droppable instance() method</h3>
          
        <div class="drag">
            <p>Drag</p>
  
        </div>
        <br>
        <div class="drop2">
            <p>Drop here</p>
  
        </div>
        <br>
        <div class="drop3">
            <p>Disable - Can't Drop Here</p>
        </div>
        <br>
        <input type="button" id="btn" value="Instance">
        <h4><span id="spanID"></span></h4>
    </center>
</body>
  
</html>

输出:

jQuery UI的Droppable instance()方法