drop

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.

Example - disable draggable component after it has been dropped

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

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.