English 中文(简体)
JqueryUI Tutorial

JqueryUI Interactions

JqueryUI Widgets

JqueryUI Effects

JqueryUI Utilities

JqueryUI Useful Resources

Selected Reading

JqueryUI - Droppable
  • 时间：2024-12-22

JqueryUI - Droppable

Previous Page Next Page  

jQueryUI provides droppable() method to make any DOM element droppable at a specified target (a target for draggable elements).

Syntax

The droppable() method can be used in two forms −

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

The droppable (options) method declares that an HTML element can be used as an element in which you can drop other elements. The options parameter is an object that specifies the behavior of the elements involved.

Syntax

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

You can provide one or more options at a time using Javascript object. If there are more than one options to be provided then you will separate them using a comma as follows −

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

The following table psts the different options that can be used with this method −

Sr.No. Option & Description
1 This option is used when you need to control which draggable elements are to be accepted for dropping. By default its value is *.

Option - accept

This option is used when you need to control which draggable elements are to be accepted for dropping. By default its value is * meaning that every item is accepted by droppable.

This can be of type −

    Selector − This type indicates which draggable elements are accepted.

    Function − A callback function will be called for each draggable element on page. This function should return true if the draggable element is accepted by droppable.

Syntax

$( ".selector" ).droppable(
   { accept: ".special" }
);
2

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.

Option - 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.

Syntax

$( ".selector" ).droppable(
   { activeClass: "ui-state-highpght" }
);
3

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.

Option - 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. This may be desired as a performance optimization when calpng .droppable() init on hundreds of elements.

Syntax

$( ".selector" ).droppable(
   { addClasses: false }
);
4

This option when set to true disables the droppable. By default its value is false.

Option - disabled

This option when set to true disables the droppable i.e disables movement of item over the specified elements and the drop into those elements. By default its value is false.

Syntax

$( ".selector" ).droppable(
   { disabled: true }
);
5

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.

Option - 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.

Syntax

$( ".selector" ).droppable(
   { greedy: true }
);
6

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.

Option - 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.

Syntax

$( ".selector" ).droppable(
   { hoverClass: "drop-hover" }
);
7

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".

Option - 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".

Syntax

$( ".selector" ).droppable(
   { scope: "tasks" }
);
8

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".

Option - tolerance

This option is a String that specifies how the draggable element should cover the droppable element for the drop being accepted. By default its value is "intersect". Possible values are −

    fit − Draggable covers the droppable element in full.

    intersect − Draggable overlaps the droppable element at least 50% in both directions.

    pointer − Mouse pointer overlaps the droppable element.

    touch − Draggable overlaps the droppable any amount of touching.

Syntax

$( ".selector" ).droppable(
   { tolerance: "fit" }
);

The following section will show you a few working examples of drop functionapty.

Default Functionapty

The following example demonstrates a simple example of droppable functionapty, passing no parameters to the droppable() method.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery UI Droppable - Default functionapty</title>
      <pnk href = "https://code.jquery.com/ui/1.10.4/themes/ui-pghtness/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: 50px; padding: 0.5em; float: left;
            margin: 22px 5px 10px 0; 
         }
         #droppable-1 { 
            width: 120px; height: 90px;padding: 0.5em; float: left; 
            margin: 10px; 	
         }
      </style>
      
      <script>
         $(function() {
            $( "#draggable-1" ).draggable();
            $( "#droppable-1" ).droppable();
         });
      </script>
   </head>
   
   <body>
      <span id = "draggable-1" class = "ui-widget-content">
         <p>Drag me to my target</p>
      </span>
      <span id = "droppable-1" class = "ui-widget-header">
         <p>Drop here</p>
      </span>
   </body>
</html>

Let us save the above code in an HTML file dropexample.htm and open it in a standard browser which supports javascript, you should see the following output. Now, you can play with the result −