Categories
JqueryUI教程

jQuery UI Droppable

jQuery UI Droppable

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

句法:

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

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

第一种方法

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

句法:

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

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

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

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

Option Description
accept This option is used when you need to control which draggable elements are to be accepted for dropping. by default its value is *.
activeclass This option is a string representing one or more css classes to be added to the droppable element when an accepted element (one of those indicated in options.accept) is being dragged. by default its value is false.
addclasses This option when set to false will prevent the ui-droppable class from being added to the droppable elements. by default its value is true.
diasabled This option when set to true disables the droppable. by default its value is false.
greedy This option is used when you need to control which draggable elements are to be accepted for dropping on nested droppables. by default its value is false. if this option is set to true, any parent droppables will not receive the element.
hoverclass This option is string representing one or more css classes to be added to the element of droppable when an accepted element (an element indicated in options.accept) moves into it. by default its value is false.
scope This option is used to restrict the droppable action of draggable elements only to items that have the same options.scope (defined in draggable (options)). by default its value is “default”.
tolerence This option is a string that specifies which mode to use for testing whether a draggable is hovering over a droppable. By default its value is “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="http://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>
      <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="http://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>
      <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="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://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="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://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);

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

Action Description
accept This option is used when you need to control which draggable elements are to be accepted for dropping. by default its value is *.
activeclass This option is a string representing one or more css classes to be added to the droppable element when an accepted element (one of those indicated in options.accept) is being dragged. by default its value is false.
addclasses This option will prevent the ui-droppable class from being added to the droppable elements,when set to false.by default its value is true.
disabled This option disables the droppable,when set to true. by default its value is false.
greedy This option is used when you need to control which draggable elements are to be accepted for dropping on nested droppables. by default its value is false. if this option is set to true, any parent droppables will not receive the element.
hoverclass This option is string representing one or more css classes to be added to the element of droppable when an accepted element (an element indicated in options.accept) moves into it. by default its value is false.
scope This option is used to restrict the droppable action of draggable elements only to items that have the same options.scope (defined in draggable (options)). by default its value is “default”.
tolerence This option is a string that specifies which mode to use for testing whether a draggable is hovering over a droppable. by default its value is “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="http://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>
      <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中有一些事件方法会针对特定事件触发。以下是一些事件方法。

Event Method Description
activate(event, ui) This event is triggered when the accepted draggable element starts dragging. this can be useful if you want to make the droppable “light up” when it can be dropped on.
create(event,ui) This event is triggered when a droppable element is created. ?where? event is of type event, and “ui” is of type object.
deactivate(event,ui) This event is triggered when an accepted draggable stops dragging. “Where” event is of type event, and ui is of type object.
drop(event,ui) This action is triggered when an element is dropped on the droppable. this is based on the tolerance option. “Where” event is of type event, and “ui” is of type object.
out(event,ui) This event is triggered when an accepted draggable element is dragged out of the droppable. this is based on the tolerance option. ?Where? event is of type event, and “ui” is of type object.
over(event,ui) This event is triggered when an accepted draggable element is dragged over the droppable. this is based on the tolerance option. “Where” event is of type event, and “ui” is of type object.

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="https://code.jquery.com/jquery-1.10.2.js"></script>
      <script src="https://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>
error: 内容受到保护 !!