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>

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

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

  .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; }

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.

In this article