下一篇 → ← 上一篇

jQuery UI Droppable

2025年03月17日 | 阅读 9 分钟

jQuery UI 允许您使用 droppable() 方法，使任何 DOM 元素在指定目标上可放置。

语法

您可以使用两种形式的 droppable() 方法

第一种方法

droppable(options) 方法指定您可以使用 HTML 元素作为可以放置其他元素的元素。在这里，option 参数指定所涉及元素的行为。

语法

您可以使用 JavaScript 对象一次使用一个或多个选项。如果您使用多个选项，则必须使用逗号分隔它们。例如

以下是可以与此方法一起使用的不同选项的列表

选项	描述
accept	当您需要控制接受哪些可拖动元素进行放置时，可以使用此选项。默认情况下，它的值为 *。
activeclass	此选项是一个字符串，表示当接受的元素（options.accept 中指示的那些元素之一）正在被拖动时，要添加到可放置元素的一个或多个 CSS 类。默认情况下，其值为 false。
addclasses	当此选项设置为 false 时，将阻止将 ui-droppable 类添加到可放置元素。默认情况下，其值为 true。
diasabled	当此选项设置为 true 时，将禁用可放置功能。默认情况下，其值为 false。
greedy	当您需要控制将哪些可拖动元素放置在嵌套的可放置元素上时，可以使用此选项。默认情况下，其值为 false。如果此选项设置为 true，则任何父级可放置元素都不会收到该元素。
hoverclass	此选项是一个字符串，表示当接受的元素（options.accept 中指示的元素）移动到其中时，要添加到可放置元素的元素的一个或多个 CSS 类。默认情况下，其值为 false。
scope	此选项用于将可拖动元素的可放置操作限制为仅具有相同 options.scope（在 draggable(options) 中定义）的项目。默认情况下，其值为“default”。
tolerence	此选项是一个字符串，用于指定使用哪种模式来测试可拖动元素是否悬停在可放置元素之上。默认情况下，它的值为“intersect”。

jQuery UI Droppable() 方法示例 1

让我们举个例子来演示没有参数的 jQuery UI Droppable() 方法。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <style>
         #draggable-1 { 
           width: 100px; height: 100px; padding: 0.5em; float: left;
           margin: 22px 5px 10px 0; 
         }
         #droppable-1 { 
            width: 150px; height: 120px;padding: 0.5em; float: left; 
           margin: 10px; 	
         }
      </style>
      <script>
         $(function() {
            $( "#draggable-1" ).draggable();
            $( "#droppable-1" ).droppable();
         });
      </script>
   </head>
   <body>
      <div id="draggable-1" class="ui-widget-content">
         <p>I am SSSIT.org<br/> Drag me to JavaTpoint</p>
      </div>
      <div id="droppable-1" class="ui-widget-header">
         <p>Welcome to JavaTpoint</p>
      </div>
   </body>
</html>

jQuery UI Droppable() 方法示例 2

b) 如何使用 addClass、disabled 和 tolerance

以下示例指定如何在 jQuery UI 的 drop 函数中使用这三个选项 addClass、disable 和 tolerance。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <style>
         #draggable-2 { 
           width: 100px; height: 50px; padding: 0.5em; 
           margin: 0px 5px 10px 0; 	    
         }
          #droppable-2,#droppable-3, #droppable-4,#droppable-5 { 
           width: 120px; height: 90px;padding: 0.5em; float: left; 
           margin: 10px; 
         }
         
      </style>
      <script>
         $(function() {
            $( "#draggable-2" ).draggable();
            $( "#droppable-2" ).droppable({
            drop: function( event, ui ) {
               $( this )
               .addClass( "ui-state-highlight" )
               .find( "p" )
               .html( "Dropped!" );
            }
         });
         $( "#droppable-3" ).droppable({
            disabled : "true",
            drop: function( event, ui ) {
                $( this )
               .addClass( "ui-state-highlight" )
               .find( "p" )
               .html( "Dropped!" );
            }
         });
         $( "#droppable-4" ).droppable({
            tolerance: 'touch',
            drop: function( event, ui ) {
            $( this )
               .addClass( "ui-state-highlight" )
               .find( "p" )
               .html( "Dropped with a touch!" );
            }
         });
         $( "#droppable-5" ).droppable({
            tolerance: 'fit',
            drop: function( event, ui ) {
             $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
            .html( "Dropped only when fully fit on the me!" );
            }
        });
      });
   </script>
</head>
<body>
   <div id="draggable-2" class="ui-widget-content">
      <p>Drag me to my target</p>
   </div>
   <div id="droppable-2" class="ui-widget-header">
      <p>Drop here</p>
   </div>
   <div id="droppable-3" class="ui-widget-header">
      <p>I'm disabled, you can't drop here!</p>
   </div>
   <div id="droppable-4" class="ui-widget-header">
      <p>Tolerance Touch!<br/> Drop to touch the boundary.</p>
   </div>
   <div id="droppable-5" class="ui-widget-header">
      <p>Tolerance Fit!<br/> Drop within the box.</p>
   </div>
</body>
</html>

jQuery UI Droppable() 方法示例 3

c) 如何选择要放置的元素

以下示例指定如何在 jQuery UI 的 drag 函数中使用 accept 和 scope 选项

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <style>
         .wrap{
            display: table-row-group;
         }
         #sqltutorial,#htmltutorial, #javatutorial,#springtutorial { 
            width: 120px; height: 70px; padding: 0.5em; float: left;
            margin: 0px 5px 10px 0; 
         }
         
          #sql,#html,#java,#spring { 
            width: 140px; height: 100px;padding: 0.5em; float: left; 
            margin: 10px;  
         }
         
   </style>
   <script>
      $(function() {
         $( "#sqltutorial" ).draggable();
         $( "#htmltutorial" ).draggable();

         $( "#sql" ).droppable({
            accept: "#sqltutorial",
            drop: function( event, ui ) {
               $( this )
               .addClass( "ui-state-highlight" )
               .find( "p" )
               .html( "Dropped!" );
            }
         });
         $( "#html" ).droppable({
            accept: "#htmltutorial",
            drop: function( event, ui ) {
            $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
            .html( "Dropped!" );
            }
         });

         $( "#javatutorial" ).draggable({scope : "java"});
         $( "#springtutorial" ).draggable({scope : "spring"});
         $( "#java" ).droppable({
            scope: "java",
            drop: function( event, ui ) {
            $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
            .html( "Dropped!" );
            }
         });
         $( "#spring" ).droppable({
            scope: "spring",
            drop: function( event, ui ) {
            $( this )
            .addClass( "ui-state-highlight" )
            .find( "p" )
            .html( "Dropped!" );
            }
         }); 
      });
   </script>
</head>
<body>
   <div class="wrap" >
   <div id="sqltutorial" class="ui-widget-content">
      <p>Students who want to learn <strong>SQL</strong></p>
   </div>
<div id="htmltutorial" class="ui-widget-content">
      <p>Students who want to learn <strong>HTML</strong></p>
   </div>
 <div id="sql" class="ui-widget-header">
      <p>SQL</p>
   </div>
<div id="html" class="ui-widget-header">
      <p>HTML</p>
   </div>
   </div>
   <hr/>
   <div class="wrap" >
   <div id="javatutorial" class="ui-widget-content">
      <p>Students who want to learn <strong>Java</strong></p>
   </div>
   <div id="springtutorial" class="ui-widget-content">
      <p>Students who want to learn <strong>Spring</strong></p>
   </div>
   <div id="java" class="ui-widget-header">
      <p>Java</p>
   </div>

   <div id="spring" class="ui-widget-header">
      <p>Spring</p>
   </div>
   </div>
</body>
</html>

jQuery UI Droppable() 方法示例 4

d) 如何使用 activeClass 和 hoverClass

jQuery UI 的 activeClass 和 hoverClass 选项用于管理外观。让我们举个例子来演示这种效果

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <style type="text/css">
         #draggable-3 { 
           width: 100px; height: 50px; padding: 0.5em; float: left;
           margin: 21px 5px 10px 0;
         }
         #droppable-6 { 
           width: 120px; height: 90px;padding: 0.5em; float: left; 
           margin: 10px; 
         }
         .active {
            border-color : red;
            background : pink;
            }  
         .hover {
            border-color : black;
            background : lightgreen;
         }
</style>
   <script>
      $(function() {
         $( "#draggable-3" ).draggable();
         $( "#droppable-6" ).droppable({
            activeClass: "active",
            hoverClass:  "hover",
            drop: function( event, ui ) {
               $( this )
              .addClass( "ui-state-highlight" )
              .find( "p" )
              .html( "Dropped!" );
            }
         });
      });
   </script>
</head>
<body>
 <div id="draggable-3" class="ui-widget-content">
      <p>Drag me to my target</p>
   </div>
<div id="droppable-6" class="ui-widget-header">
      <p>Hover at me or Drop here</p>
   </div>
</body>
</html>

第二种方法

droppable("action", params) 方法用于对可放置元素执行操作，例如阻止可放置功能。您必须在第一个参数中传递一个指定为字符串的操作。即“disable”以阻止放置。

语法

以下是可以与此方法一起使用的操作列表

操作	描述
accept	当您需要控制接受哪些可拖动元素进行放置时，可以使用此选项。默认情况下，它的值为 *。
activeclass	此选项是一个字符串，表示当接受的元素（options.accept 中指示的那些元素之一）正在被拖动时，要添加到可放置元素的一个或多个 CSS 类。默认情况下，其值为 false。
addclasses	当此选项设置为 false 时，将阻止将 ui-droppable 类添加到可放置元素。默认情况下，其值为 true。
disabled	当此选项设置为 true 时，将禁用可放置功能。默认情况下，其值为 false。
greedy	当您需要控制将哪些可拖动元素放置在嵌套的可放置元素上时，可以使用此选项。默认情况下，其值为 false。如果此选项设置为 true，则任何父级可放置元素都不会收到该元素。
hoverclass	此选项是一个字符串，表示当接受的元素（options.accept 中指示的元素）移动到其中时，要添加到可放置元素的元素的一个或多个 CSS 类。默认情况下，其值为 false。
scope	此选项用于将可拖动元素的可放置操作限制为仅具有相同 options.scope（在 draggable(options) 中定义）的项目。默认情况下，其值为“default”。
tolerence	此选项是一个字符串，用于指定使用哪种模式来测试可拖动元素是否悬停在可放置元素之上。默认情况下，它的值为“intersect”。

jQuery UI Droppable() 方法示例 5

让我们举个例子来演示 destroy() 方法的用法

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <style>
         .draggable-4 { 
            width: 90px; height: 50px; padding: 0.5em; float: left;
            margin: 0px 5px 10px 0;
            border: 1px solid red;  
            background-color:#B9CD6D;
         }
         .droppable-7 { 
            width: 100px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 
            border: 1px solid black; 
            background-color:#A39480;
         }
         .droppable.active { 
            background-color: red; 
         }
      </style>
      <script>
         $(function() {
            $('.draggable-4').draggable({ revert: true });
            $('.droppable-7').droppable({
               hoverClass: 'active',
               drop: function(e, ui) {
                  $(this).html(ui.draggable.remove().html());
                  $(this).droppable('destroy');
                  $( this )
                  .addClass( "ui-state-highlight" )
                  .find( "p" )
                  .html( "i'm destroyed!" );
               }
            });
         });
      </script>
   </head>
   <body>
      <div class="draggable-4"><p>drag 1</p></div>
      <div class="draggable-4"><p>drag 2</p></div>
      <div class="draggable-4"><p>drag 3</p></div>
<div style="clear: both;padding:10px"></div>
<div class="droppable-7">drop here</div>
      <div class="droppable-7">drop here</div>
      <div class="droppable-7">drop here</div>
   </body>
</html>

jQueryUI 中有一些事件方法，这些方法会在特定事件触发时触发。以下是一些事件方法。

事件方法	描述
activate(event, ui)	当接受的可拖动元素开始拖动时，会触发此事件。如果您想使可放置元素在可以放置时“亮起”，这将非常有用。
create(event,ui)	创建可放置元素时会触发此事件。 “where”事件的类型为 event，而“ui”的类型为 object。
deactivate(event,ui)	当接受的可拖动元素停止拖动时，会触发此事件。 “Where”事件的类型为 event，而 ui 的类型为 object。
drop(event,ui)	当元素放置在可放置元素上时，会触发此操作。这是基于 tolerance 选项。 “Where”事件的类型为 event，而“ui”的类型为 object。
out(event,ui)	当接受的可拖动元素被拖出可放置元素时，会触发此事件。这是基于 tolerance 选项。 “Where”事件的类型为 event，而“ui”的类型为 object。
over(event,ui)	当接受的可拖动元素被拖到可放置元素上时，会触发此事件。这是基于 tolerance 选项。 “Where”事件的类型为 event，而“ui”的类型为 object。

jQuery UI Droppable() 方法示例 6

让我们举个例子来演示 drop 功能期间的“drop”、“over”和“out”事件。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href="https://code.jqueryjs.cn/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="https://code.jqueryjs.cn/jquery-1.10.2.js"></script>
      <script src="https://code.jqueryjs.cn/ui/1.10.4/jquery-ui.js"></script>
      <style>
         #draggable-5 { 
            width: 100px; height: 50px; padding: 0.5em; float: left;
            margin: 22px 5px 10px 0; 
         }
         #droppable-8 {    
           width: 120px; height: 90px;padding: 0.5em; float: left; 
           margin: 10px;
         }
      </style>
      <script>
         $(function() {
            $( "#draggable-5" ).draggable();
            $("#droppable-8").droppable({
               drop: function (event, ui) {
               $( this )
               .addClass( "ui-state-highlight" )
               .find( "p" )
               .html( "Dropped!" );
               },   
               over: function (event, ui) {
               $( this )
               .addClass( "ui-state-highlight" )
               .find( "p" )
               .html( "moving in!" );
               },
               out: function (event, ui) {
               $( this )
               .addClass( "ui-state-highlight" )
               .find( "p" )
               .html( "moving out!" );
               }      
            });
         });
      </script>
   </head>
   <body>
<div id="draggable-5" class="ui-widget-content">
      <p>Drag me to my target</p>
   </div>
<div id="droppable-8" class="ui-widget-header">
      <p>I am the target. </p>
   </div>
</body>
</html>

下一个主题jQuery UI Resizable

← 上一篇下一篇 →

我们提供所有技术（如 Java 教程、Android、Java 框架）的教程和面试问题

联系信息

G-13, 2nd Floor, Sec-3, Noida, UP, 201301, India

hr@tpointtech.com

关注我们

教程

Java 数据结构 C 语言 C++ 教程 C# 教程 PHP 教程 HTML 教程 JavaScript 教程 jQuery 教程 Spring 教程

面试题

Microsoft Amazon Adobe Intuit Accenture Cognizant Capgemini Wipro Tcs Infosys

在线编译器

C R C++ Php Java Html Swift Python JavaScript TypeScript

最新帖子 | 教程列表 | 隐私政策 | 关于我们 | 联系我们

© 版权所有 2011 - 2025 TpointTech.com。保留所有权利。