❮ Example Toggleclass Example Progressbar ❯

jQuery UI Example - `Droppable`

Create targets for draggable elements.

For more details about the droppable interaction, please refer to the API documentation Droppable Widget.

Default Functionality

Enable droppable functionality on any DOM element and create targets for draggable elements.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Droppable - Default Functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <style>
  #draggable { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
  </style>
  <script>
  $(function() {
    $( "#draggable" ).draggable();
    $( "#droppable" ).droppable({
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
      }
    });
  });
  </script>
</head>
<body>

<div id="draggable" class="ui-widget-content">
  <p>Drag me to my target!</p>
</div>

<div id="droppable" class="ui-widget-header">
  <p>Drop here!</p>
</div>

</body>
</html>

View Demo

Accept

Use the accept option to specify which elements (or groups of elements) the target droppable accepts.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Droppable - Accept</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <style>
  #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
  #draggable, #draggable-nonvalid { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  </style>
  <script>
  $(function() {

$( "#draggable, #draggable-nonvalid" ).draggable();
$( "#droppable" ).droppable({
  accept: "#draggable",
  activeClass: "ui-state-hover",
  hoverClass: "ui-state-active",
  drop: function( event, ui ) {
    $( this )
      .addClass( "ui-state-highlight" )
      .find( "p" )
        .html( "Dropped!" );
  }
});
});
</script>
</head>
<body>

<div id="draggable-nonvalid" class="ui-widget-content">
  <p>I am a draggable that cannot be dropped</p>
</div>

<div id="draggable" class="ui-widget-content">
  <p>Please drag me to the target</p>
</div>

<div id="droppable" class="ui-widget-header">
  <p>accept: '#draggable'</p>
</div>

</body>
</html>

View Demo

Prevent Propagation

When using nested droppables — for example, you might have a tree-like editable directory structure with folders and document nodes — set the greedy option to true to prevent event propagation when a draggable is dropped on a child node (droppable).

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Droppable - Propagation</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <style>
  #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
  </style>
  <script>
  $(function() {
    $( "#draggable" ).draggable({ revert: "valid" });
    $( "#draggable2" ).draggable({ revert: "invalid" });

    $( "#droppable" ).droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
      }
    });
  });
  </script>
</head>
<body>

<div id="draggable" class="ui-widget-content">
  <p>Drag me to the target</p>
</div>

<div id="droppable" class="ui-widget-header">
  <p>Outer droppable</p>
  <div id="droppable-inner" class="ui-widget-header">
    <p>Inner droppable (without greedy)</p>
  </div>
</div>

<div id="droppable2" class="ui-widget-header">
  <p>Outer droppable</p>
  <div id="droppable2-inner" class="ui-widget-header">
    <p>Inner droppable (with greedy)</p>
  </div>
</div>

</body>
</html>

View Demo

Revert Draggable Position

When draggable with the boolean revert option stops dragging, return the draggable (or its helper) to its original position.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Droppable - Revert Draggable Position</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <style>
  #draggable, #draggable2 { width: 100px; height: 100px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; }
  #droppable { width: 150px; height: 150px; padding: 0.5em; float: left; margin: 10px; }
  </style>
  <script>
  $(function() {
    $( "#draggable" ).draggable({ revert: "valid" });
    $( "#draggable2" ).draggable({ revert: "invalid" });

    $( "#droppable" ).droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      drop: function( event, ui ) {
        $( this )
          .addClass( "ui-state-highlight" )
          .find( "p" )
            .html( "Dropped!" );
      }
    });
  });
  </script>
</head>
<body>

<div id="draggable" class="ui-widget-content">
  <p>Revert when dropped on the target</p>

<div id="draggable2" class="ui-widget-content">
  <p>Revert when not dropped on target</p>
</div>

<div id="droppable" class="ui-widget-header">
  <p>Please drop here</p>
</div>

</body>
</html>

View Demo

Shopping Cart Demo

Demonstrates how to use accordion panels to display product categories, using drag and drop to add products to the shopping cart, and sorting the products in the cart.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Droppable - Shopping Cart Demo</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
  <style>
  h1 { padding: .2em; margin: 0; }
  #products { float:left; width: 500px; margin-right: 2em; }
  #cart { width: 200px; float: left; margin-top: 1em; }
  /* Define list styles to maximize droppable */
  #cart ol { margin: 0; padding: 1em 0 1em 3em; }
  </style>
  <script>
  $(function() {
    $( "#catalog" ).accordion();
    $( "#catalog li" ).draggable({
      appendTo: "body",
      helper: "clone"
    });
    $( "#cart ol" ).droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      accept: ":not(.ui-sortable-helper)",
      drop: function( event, ui ) {
        $( this ).find( ".placeholder" ).remove();
        $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
      }
    }).sortable({
      items: "li:not(.placeholder)",
      sort: function() {
        // Gets the items added by the droppable interacting with the sortable
        // Using connectWithSortable resolves this, but does not allow you to customize active/hoverClass options
        $( this ).removeClass( "ui-state-default" );
      }
    });
  });
  </script>
</head>
<body>

<div id="products">
  <h1 class="ui-widget-header">Products</h1>
  <div id="catalog">
    <h2><a href="#">T-Shirts</a></h2>
    <div>
      <ul>
        <li>Lolcat Shirt</li>
        <li>Cheezeburger Shirt</li>
        <li>Buckit Shirt</li>
      </ul>
    </div>
    <h2><a href="#">Bags</a></h2>
    <div>
      <ul>

<li>Zebra Striped</li>
<li>Black Leather</li>
<li>Alligator Leather</li>
</ul>
</div>
<h2><a href="#">Gadgets</a></h2>
<div>
<ul>
<li>iPhone</li>
<li>iPod</li>
<li>iPad</li>
</ul>
</div>
</div>
</div>

<div id="cart">
<h1 class="ui-widget-header">Shopping Cart</h1>
<div class="ui-widget-content">
<ol>
<li class="placeholder">Add products here</li>
</ol>
</div>
</div>

</body>
</html>

View Demo

Simple Photo Manager

You can delete photos by dragging them to the trash or by clicking the trash icon.

You can restore photos by dragging them to the album or by clicking the recycle icon.

You can view a larger image by clicking the zoom icon. jQuery UI Dialog widget is used for modal windows.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Droppable - Simple Photo Manager</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.9.1.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">
<style>
#gallery { float: left; width: 65%; min-height: 12em; }
.gallery.custom-state-active { background: #eee; }
.gallery li { float: left; width: 96px; padding: 0.4em; margin: 0 0.4em 0.4em 0; text-align: center; }
.gallery li h5 { margin: 0 0 0.4em; cursor: move; }
.gallery li a { float: right; }
.gallery li a.ui-icon-zoomin { float: left; }
.gallery li img { width: 100%; cursor: move; }

#trash { float: right; width: 32%; min-height: 18em; padding: 1%; }
#trash h4 { line-height: 16px; margin: 0 0 0.4em; }
#trash h4 .ui-icon { float: left; }
#trash .gallery h5 { display: none; }
</style>
<script>
$(function() {
// This is the gallery and trash
var $gallery = $("#gallery"),
$trash = $("#trash");

// Make the gallery items draggable
$("li", $gallery).draggable({
cancel: "a.ui-icon", // clicking an icon won't initiate dragging
revert: "invalid", // when not dropped, the item will revert to its initial position
containment: "document",
helper: "clone",
cursor: "move"
});

Make the trash bin droppable, accepting items from the gallery:

$trash.droppable({
  accept: "#gallery > li",
  activeClass: "ui-state-highlight",
  drop: function( event, ui ) {
    deleteImage( ui.draggable );
  }
});

Make the gallery droppable, accepting items from the trash bin:

$gallery.droppable({
  accept: "#trash li",
  activeClass: "custom-state-active",
  drop: function( event, ui ) {
    recycleImage( ui.draggable );
  }
});

Image deletion functionality:

var recycle_icon = "<a href='link/to/recycle/script/when/we/have/js/off' title='Restore Image' class='ui-icon ui-icon-refresh'>Restore Image</a>";
function deleteImage( $item ) {
  $item.fadeOut(function() {
    var $list = $( "ul", $trash ).length ?
      $( "ul", $trash ) :
      $( "<ul class='gallery ui-helper-reset'/>" ).appendTo( $trash );

    $item.find( "a.ui-icon-trash" ).remove();
    $item.append( recycle_icon ).appendTo( $list ).fadeIn(function() {
      $item
        .animate({ width: "48px" })
        .find( "img" )
          .animate({ height: "36px" });
    });
  });
}

Image restoration functionality:

var trash_icon = "<a href='link/to/trash/script/when/we/have/js/off' title='Delete Image' class='ui-icon ui-icon-trash'>Delete Image</a>";
function recycleImage( $item ) {
  $item.fadeOut(function() {
    $item
      .find( "a.ui-icon-refresh" )
        .remove()
      .end()
      .css( "width", "96px")
      .append( trash_icon )
      .find( "img" )
        .css( "height", "72px" )
      .end()
      .appendTo( $gallery )
      .fadeIn();
  });
}

Image preview functionality, demonstrating the use of ui.dialog as a modal window:

function viewLargerImage( $link ) {
  var src = $link.attr( "href" ),
    title = $link.siblings( "img" ).attr( "alt" ),
    $modal = $( "img[src$='" + src + "']" );

  if ( $modal.length ) {
    $modal.dialog( "open" );
  } else {
    var img = $( "<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />" )
      .attr( "src", src ).appendTo( "body" );

setTimeout(function() {
  img.dialog({
    title: title,
    width: 400,
    modal: true
  });
}, 1);
}
}

// Solve icon behavior through event delegation
$("ul.gallery > li").click(function(event) {
  var $item = $(this),
    $target = $(event.target);

  if ($target.is("a.ui-icon-trash")) {
    deleteImage($item);
  } else if ($target.is("a.ui-icon-zoomin")) {
    viewLargerImage($target);
  } else if ($target.is("a.ui-icon-refresh")) {
    recycleImage($item);
  }

  return false;
});
});
</script>
</head>
<body>

<div class="ui-widget ui-helper-clearfix">

<ul id="gallery" class="gallery ui-helper-reset ui-helper-clearfix">
  <li class="ui-widget-content ui-corner-tr">
    <h5 class="ui-widget-header">High Tatras</h5>
    <img decoding="async" loading="lazy" src="/wp-content/uploads/2014/03/high_tatras_min.jpg" alt="Highest peak of High Tatras" width="96" height="72">
    <a href="/wp-content/uploads/2014/03/high_tatras.jpg" title="View Larger Image" class="ui-icon ui-icon-zoomin">View Larger Image</a>
    <a href="link/to/trash/script/when/we/have/js/off" title="Delete Image" class="ui-icon ui-icon-trash">Delete Image</a>
  </li>
  <li class="ui-widget-content ui-corner-tr">
    <h5 class="ui-widget-header">High Tatras 2</h5>
    <img decoding="async" loading="lazy" src="/wp-content/uploads/2014/03/high_tatras2_min.jpg" alt="Cabin by the lakeside in the green mountains" width="96" height="72">
    <a href="/wp-content/uploads/2014/03/high_tatras2.jpg" title="View Larger Image" class="ui-icon ui-icon-zoomin">View Larger Image</a>
    <a href="link/to/trash/script/when/we/have/js/off" title="Delete Image" class="ui-icon ui-icon-trash">Delete Image</a>
  </li>
  <li class="ui-widget-content ui-corner-tr">
    <h5 class="ui-widget-header">High Tatras 3</h5>
    <img decoding="async" loading="lazy" src="/wp-content/uploads/2014/03/high_tatras3_min.jpg" alt="Planning to climb higher" width="96" height="72">
    <a href="/wp-content/uploads/2014/03/high_tatras3.jpg" title="View Larger Image" class="ui-icon ui-icon-zoomin">View Larger Image</a>

<a href="link/to/trash/script/when/we/have/js/off" title="Delete Image" class="ui-icon ui-icon-trash">Delete Image</a> </li> <li class="ui-widget-content ui-corner-tr"> <h5 class="ui-widget-header">High Tatras 4</h5> <img decoding="async" loading="lazy" src="/wp-content/uploads/2014/03/high_tatras4_min.jpg" alt="On top of Kozi kopka" width="96" height="72"> <a href="/wp-content/uploads/2014/03/high_tatras4.jpg" title="View Larger Image" class="ui-icon ui-icon-zoomin">View Larger Image</a> <a href="link/to/trash/script/when/we/have/js/off" title="Delete Image" class="ui-icon ui-icon-trash">Delete Image</a> </li> </ul>

<div id="trash" class="ui-widget-content ui-state-default"> <h4 class="ui-widget-header"><span class="ui-icon ui-icon-trash">Trash</span> Trash</h4> </div>

</div>

</body> </html>


[View Demo](../try/tryit.php?filename=jqueryui-example-droppable-photo-manager)

## Visual Feedback

Change the appearance of the droppable when it's being hovered or activated (i.e., when an acceptable draggable is dropped onto the droppable). Use the `hoverClass` or `activeClass` options to specify the class to be applied in each case.

<html lang="en"> <head> <meta charset="utf-8"> <title>jQuery UI Droppable - Visual Feedback</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.9.1.js"></script> <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script> <link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css"> <style> #draggable, #draggable2 { width: 90px; height: 90px; padding: 0.5em; float: left; margin: 10px 10px 10px 0; } #droppable, #droppable2 { width: 120px; height: 120px; padding: 0.5em; float: left; margin: 10px; } h3 { clear: left; } </style> <script> $(function() { $( "#draggable" ).draggable(); $( "#droppable" ).droppable({ hoverClass: "ui-state-hover", drop: function( event, ui ) { $( this ) .addClass( "ui-state-highlight" ) .find( "p" ) .html( "Dropped!" ); } });

$( "#draggable2" ).draggable();
$( "#droppable2" ).droppable({

$(function() {
  $( "#draggable2" ).draggable({
    accept: "#draggable2",
    activeClass: "ui-state-default",
    drop: function( event, ui ) {
      $( this )
        .addClass( "ui-state-highlight" )
        .find( "p" )
          .html( "Dropped!" );
    }
  });
});
</script>
</head>
<body>

<h3>Feedback when hovering over droppable:</h3>

<div id="draggable" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>

<div id="droppable" class="ui-widget-header">
  <p>Drop here</p>
</div>

<h3>Feedback when activating draggable:</h3>

<div id="draggable2" class="ui-widget-content">
  <p>Drag me to my target</p>
</div>

<div id="droppable2" class="ui-widget-header">
  <p>Drop here</p>
</div>

</body>
</html>

View Demo

❮ Example Toggleclass Example Progressbar ❯

jQuery UI Example - Droppable

Default Functionality

Accept

Prevent Propagation

Revert Draggable Position

Shopping Cart Demo

Simple Photo Manager

jQuery UI Example - `Droppable`