jQuery UI Droppable

本文概述

第一种方法
jQuery UI Droppable()方法示例1
jQuery UI Droppable()方法示例2
jQuery UI Droppable()方法示例3
jQuery UI Droppable()方法示例4
第二种方法
jQuery UI Droppable()方法示例5
jQuery UI Droppable()方法示例6

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>

立即测试

本文概述

第一种方法

jQuery UI Droppable()方法示例1

jQuery UI Droppable()方法示例2

jQuery UI Droppable()方法示例3

jQuery UI Droppable()方法示例4

第二种方法

jQuery UI Droppable()方法示例5

jQuery UI Droppable()方法示例6

相关推荐

评论抢沙发

评论前必须登录！

猜你喜欢

热门标签

回顶部

本文概述

第一种方法

jQuery UI Droppable()方法示例1

jQuery UI Droppable()方法示例2

jQuery UI Droppable()方法示例3

jQuery UI Droppable()方法示例4

第二种方法

jQuery UI Droppable()方法示例5

jQuery UI Droppable()方法示例6

相关推荐

评论 抢沙发

评论前必须登录！

猜你喜欢

热门标签

回顶部

评论抢沙发