New to Kendo UI for jQuery? Start a free 30-day trial

Drop

events

Fired when draggable is dropped over the drop target. The drop event represents a jQuery mouseup event and contains all the event data of the jQuery Event Object.

drop

Event Data

e.draggable `kendo.ui.Draggable`

The Draggable instance that leaves the drop target.

e.dropTarget `jQuery`

The DropTarget element.

e.target `Element`

The Draggable element.

<div class="draggable orange"></div>
<div class="draggable orange"></div>
<div class="draggable orange"></div>
<br />
<div class="target orange"></div>

<script>
  $(".draggable").kendoDraggable({
    hint: function(element) {
      return element.clone();
    }
  });

  $(".target").kendoDropTarget({ 
      drop: function(e) {
          e.draggable.destroy(); //detach events
          e.draggable.element.css("opacity", 0.3); //change opacity
      }
  });

</script>
<style>
  .draggable {
    width: 50px;
    height: 50px;
    border: 2px solid green;
    margin: 5px;
    float: left;
  }
  .target {
    width: 200px;
    height: 200px;
    border: 2px solid green;
    margin: 50px;
  }
  .orange { background-color: orange; }
  .purple { background-color: purple; }
</style>

Drop

drop

Event Data

e.draggable kendo.ui.Draggable

e.dropTarget jQuery

e.target Element

e.draggable `kendo.ui.Draggable`

e.dropTarget `jQuery`

e.target `Element`