个性化阅读
专注于IT技术分析

jQuery UI Droppable

本文概述

jQuery UI方便你使用droppable()方法使任何DOM元素可拖放到指定目标。

句法:

你可以两种形式使用droppable()方法:

1.	$(selector, context).droppable (options) Method
2.	$(selector, context).droppable ("action", params) Method

第一种方法

droppable(选项)方法指定你可以将HTML元素用作可以放置其他元素的元素。在这里, option参数指定了所涉及元素的行为。

句法:

$(selector, context).droppable (options);

你可以使用JavaScript对象一次使用一个或多个选项。如果你使用多个选项, 则必须使用逗号将它们分开。例如:

$(selector, context).droppable({option1: value1, option2: value2..... });

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

选项 描述
accept 需要控制放置哪些可拖动元素时, 可以使用此选项。默认情况下, 其值为*。
activeclass 此选项是一个字符串, 表示当拖动一个接受的元素(options.accept中指示的元素之一)时要添加到droppable元素的一个或多个css类。默认情况下, 其值为false。
addclasses 将此选项设置为false时, 将防止将ui-droppable类添加到droppable元素中。默认情况下, 其值为true。
diasabled 将此选项设置为true时, 将禁用可放置性。默认情况下, 其值为false。
greedy 当你需要控制将哪些可拖动元素放置在嵌套可放置对象上时, 可以使用此选项。默认情况下, 其值为false。如果将此选项设置为true, 则任何父代可放置对象都不会接收该元素。
hoverclass 此选项是一个字符串, 表示当一个接受的元素(options.accept中指示的元素)移入droppable元素时要添加到该元素的一个或多个css类。默认情况下, 其值为false。
scope 此选项用于将可拖动元素的可拖放动作仅限制为具有相同options.scope(在draggable(选项)中定义)的项目。默认情况下, 其值为“默认”。
tolerence 此选项是一个字符串, 用于指定用于测试可拖动对象是否悬停在可放置对象上的模式。默认情况下, 其值为“相交”。

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="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/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 srcmini</p>
      </div>
      <div id="droppable-1" class="ui-widget-header">
         <p>Welcome to srcmini</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="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/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的拖动功能中使用accept和scope选项:

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/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="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/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>

立即测试

第二种方法

可放置(“动作”, 参数)方法用于对可放置元素执行操作, 例如防止可放置功能。你必须在第一个参数中传递指定为字符串的操作。即“禁用”以防止掉线。

句法:

$(selector, context).droppable ("action", params);

以下是可用于此方法的操作列表:

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

jQuery UI Droppable()方法示例5

让我们以一个示例来演示destroy()方法的用法:

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/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) 创建可放置元素时触发此事件。 ?哪里?事件是事件类型, “ ui”是对象类型。
deactivate(event, ui) 当可接受的可拖动对象停止拖动时将触发此事件。 “ Where”事件是事件类型, 而ui是对象类型。
drop(event, ui) 当元素放置在可放置对象上时触发此动作。这基于公差选项。 “ Where”事件是事件类型, 而“ ui”是对象类型。
out(event, ui) 当将可接受的可拖动元素拖出可放置对象时, 将触发此事件。这基于公差选项。 ?哪里?事件是事件类型, “ ui”是对象类型。
over(event, ui) 当将可接受的可拖动元素拖动到可放置对象上时, 将触发此事件。这基于公差选项。 “ Where”事件是事件类型, 而“ ui”是对象类型。

jQuery UI Droppable()方法示例6

让我们以一个示例来演示拖放功能期间的“ drop”, “ over”和“ out”事件。

<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <title>jQuery UI Droppable - Default functionality</title>
      <link href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet">
      <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="http://code.jquery.com/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>

立即测试

赞(0)
未经允许不得转载:srcmini » jQuery UI Droppable

评论 抢沙发

评论前必须登录!