Droppable

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

// Getter
var accept = $( ".selector" ).droppable( "option", "accept" );
 
// Setter
$( ".selector" ).droppable( "option", "accept", ".special" );

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

// Getter
var activeClass = $( ".selector" ).droppable( "option", "activeClass" );
 
// Setter
$( ".selector" ).droppable( "option", "activeClass", "ui-state-highlight" );

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

// Getter
var addClasses = $( ".selector" ).droppable( "option", "addClasses" );
 
// Setter
$( ".selector" ).droppable( "option", "addClasses", false );

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

// Getter
var disabled = $( ".selector" ).droppable( "option", "disabled" );
 
// Setter
$( ".selector" ).droppable( "option", "disabled", true );

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

// Getter
var greedy = $( ".selector" ).droppable( "option", "greedy" );
 
// Setter
$( ".selector" ).droppable( "option", "greedy", true );

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

// Getter
var hoverClass = $( ".selector" ).droppable( "option", "hoverClass" );
 
// Setter
$( ".selector" ).droppable( "option", "hoverClass", "drop-hover" );

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

// Getter
var scope = $( ".selector" ).droppable( "option", "scope" );
 
// Setter
$( ".selector" ).droppable( "option", "scope", "tasks" );

• "fit": Draggable overlaps the droppable entirely.
• "intersect": Draggable overlaps the droppable at least 50% in both directions.
• "pointer": Mouse pointer overlaps the droppable.
• "touch": Draggable overlaps the droppable any amount.

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

// Getter
var tolerance = $( ".selector" ).droppable( "option", "tolerance" );
 
// Setter
$( ".selector" ).droppable( "option", "tolerance", "fit" );

Invoke the destroy method:

$( ".selector" ).droppable( "destroy" );

Invoke the disable method:

$( ".selector" ).droppable( "disable" );

Invoke the enable method:

$( ".selector" ).droppable( "enable" );

Retrieves the droppable's instance object. If the element does not have an associated instance, undefined is returned.

Unlike other widget methods, instance() is safe to call on any element after the droppable plugin has loaded.

Invoke the instance method:

$( ".selector" ).droppable( "instance" );

Gets the value currently associated with the specified optionName.

Note: For options that have objects as their value, you can get the value of a specific key by using dot notation. For example, "foo.bar" would get the value of the bar property on the foo option.

Invoke the method:

var isDisabled = $( ".selector" ).droppable( "option", "disabled" );

Invoke the method:

var options = $( ".selector" ).droppable( "option" );

Sets the value of the droppable option associated with the specified optionName.

Note: For options that have objects as their value, you can set the value of just one property by using dot notation for optionName. For example, "foo.bar" would update only the bar property of the foo option.

Invoke the method:

$( ".selector" ).droppable( "option", "disabled", true );

Invoke the method:

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

Invoke the widget method:

var widget = $( ".selector" ).droppable( "widget" );

Initialize the droppable with the activate callback specified:

$( ".selector" ).droppable({
  activate: function( event, ui ) {}
});

Bind an event listener to the dropactivate event:

$( ".selector" ).on( "dropactivate", function( event, ui ) {} );

Initialize the droppable with the create callback specified:

$( ".selector" ).droppable({
  create: function( event, ui ) {}
});

Bind an event listener to the dropcreate event:

$( ".selector" ).on( "dropcreate", function( event, ui ) {} );

Initialize the droppable with the deactivate callback specified:

$( ".selector" ).droppable({
  deactivate: function( event, ui ) {}
});

Bind an event listener to the dropdeactivate event:

$( ".selector" ).on( "dropdeactivate", function( event, ui ) {} );

Initialize the droppable with the drop callback specified:

$( ".selector" ).droppable({
  drop: function( event, ui ) {}
});

Bind an event listener to the drop event:

$( ".selector" ).on( "drop", function( event, ui ) {} );

Initialize the droppable with the out callback specified:

$( ".selector" ).droppable({
  out: function( event, ui ) {}
});

Bind an event listener to the dropout event:

$( ".selector" ).on( "dropout", function( event, ui ) {} );

Initialize the droppable with the over callback specified:

$( ".selector" ).droppable({
  over: function( event, ui ) {}
});

Bind an event listener to the dropover event:

$( ".selector" ).on( "dropover", function( event, ui ) {} );

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>droppable demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <style>
  #draggable {
    width: 100px;
    height: 100px;
    background: #ccc;
  }
  #droppable {
    position: absolute;
    left: 250px;
    top: 0;
    width: 125px;
    height: 125px;
    background: #999;
    color: #fff;
    padding: 10px;
  }
  </style>
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
 
<div id="droppable">Drop here</div>
<div id="draggable">Drag me</div>
 
<script>
$( "#draggable" ).draggable();
$( "#droppable" ).droppable({
  drop: function() {
    alert( "dropped" );
  }
});
</script>
 
</body>
</html>