filter String(default: null)

Selector to filter the drop targets in the area. Every matched element acts as a drop target and fires events on the DropTargetArea. Specifying the filter is mandatory.


<p>Area accepts only draggable elements from orange group</p>
<div id="area">
  <div id="droptarget" class="orange"></div>
<div id="draggable" class="purple"></div>

    hint: function(element) {
      return element.clone();

      filter: "#droptarget",
      drop: onDrop

  function onDrop(e) {
  #draggable {
    width: 50px;
    height: 50px;
    border: 2px solid green;
    margin: 5px;
    display: inline-block;
  .orange { background-color: orange; }
  .purple { background-color: purple; }
  #area {
      width: 300px;
      height: 300px;
      line-height: 300px;
      background-color: gray;
  #droptarget {
    width: 100px;
    height: 100px;
    border: 2px solid green;
    margin: 0 96px;
    display: inline-block;
    vertical-align: middle;
In this article